[Resolved] Mobile Theme with Youtube Link on iPhone (webkit)
Hi, I am trying to help out some friends with their page. They seem to be running into a weird very localized kinda display error only in the mobile theme on phones (tablets display the full site and do not have this issue). The error has been noticed on iPhones running iOS 6.0.1/6.0.2 with Safari and Chrome. Running Opera works slightly better. Also the issue sometimes will present on Android based phones with no flash capability.
The issue itself is when the browser attempts to load a youtube based link or embed the embed will fill the page in an endless loop and make the video impossibly tall. It will show a black window then eventually reload to white then back to black. During the color change process the page seems to be dynamically making itself longer making it impossible to scroll. In the full desktop version the website will load fine on any system but on the mobile versions it will do this. It will even load normally on desktop browsers pretending to be mobile browsers. Is there something that should be done to the embed code to prevent this?
So far I have disabled and re-enabled plug-ins that seems appropriate regarding iframes, youtube, and anything mobile related. Turning off the mobile theme in jetpack seems to let the phones load the full site normally. I have only spent about a day and a half attempting to troubleshoot but this is where everything has led me.
If you would like to see the issue for yourself check out this page here:
Again this issue will only present on a mobile device as deemed by jetpack to be a phone.
Hopefully, you can help.
I have tried to reproduce the issue, but the video seems to play just fine on my phone.
Could you post a screenshot, so I can investigate further?
Could you also try to disable all plugins that make changes to the Mobile Theme, like LinkWithin, Disqus, and Google Ads?
Makes me wonder what device and software you have. We have tried it on two different Galaxy S3s and one works (ice cream sandwich) the other didn’t (unknown). I personally have an Android 2.2.2 device that seems fine as well. Also did you see the mobile version or the desktop version? My phone remembered the last setting and kept it in desktop mode so it worked fine until I noticed and forced it back in mobile.
When it presents you just cant scroll to the bottom. I have tried shutting off all the plugins one at a time. I was hoping not to shut them all off since there will be something released soon on the site that people keep checking for. I will try shutting everything off later tonight and bringing it back up slowly.
3 pics showing the box for the flash window on the mobile view only filling the screen. The scroll bar on the right was me scrolling down for 15 seconds constantly to get past that item. Also when I load the mobile version of the site on a desktop (changing my user agent) it also loads fine so it is just on the phones.
I have disabled and then reenabled the following before moving to the next one: add widgets to page, Advertisement Management, Disqus Comment System, iframe, LinkWithin, and TubePress.
All active and non-active Plugins:
add widgets to page 1.3.2 (active)
Advertisement Management 1.0 (active)
All in one Favicon 4.1 (active)
Contact Form Manager 1.2 (active)
Disqus Comment System 2.74 (active)
eShop for WordPress 6.3.7 (active)
FD Feedburner Plugin 1.46 (active)
GigPress 2.2.4 (active)
Google Analytics for WordPress 4.2.8 (active)
iframe 2.5 (active)
Iframe Embedder 1.2 (not active)
iTunes Lookup Widget 0.4 (active)
Jetpack by WordPress.com 2.1.1 (active)
LinkWithin 0.85 (active)
Mingle Forum 22.214.171.124 (active)
NextGEN Gallery 1.9.10 (active)
Options Framework 1.4 (active)
Page Links To 2.7.1 (active)
Q and A 126.96.36.199 (active)
Search Everything 188.8.131.52 (active)
Share Buttons by Lockerz / AddToAny 1.0.3 (not active)
Slideshow Gallery 184.108.40.206 (active)
Social Media Tabs 1.4.4 (active)
TubePress 2.4.5 (active)
Ultimate Google Analytics 1.6.0 (active)
Ultimate TinyMCE 4.0.3 (active)
WP BandCamp 1.1.1 (active)
WP Count Down 1.09
WP Spreadshirt 1.6.2 (active)
Thanks for providing more details about your problem.
As I mentioned, I couldn’t reproduce the problem on my own phone (a Nexus S running Ice Cream Sandwich http://i.wpne.ws/MF9S ), but I have asked some of my colleagues to try to access your site, and they were able to reproduce the issue (both of them with an iPhone).
Could you let me know how you inserted that youtube video? Did you use a Youtube shortcode? Could you try to insert the video by pasting the youtube URL on a different line?
Since LinkWithin seems to be breaking the mobile layout on both Android and iPhone, I would suggest that you disable this plugin first. I don’t know all of the other plugins, but the iFrame plugin might have an effect on the issue as well.
Could you also deactivate “add widgets to page”, and try to reload the page with all these changes?
Added 3 more screen shots. First in Opera not even loading the flash box, second in Chrome doing the same thing and the last showing Chrome in Full Site mode working normally. Tapping on the video in all but Opera will load properly after it redirects to quicktime or the youtube app. Also this issue also affects the main page as well since the same code is there as well.
I also added <scrolling=”no”> to the embed code for the youtube link.
I am not sure how the youtube link was added but this is what is in the page code:
<object width=”420″ height=”315″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”allowFullScreen” value=”true” /><param name=”allowscriptaccess” value=”always” /><param name=”src” value=”http://www.youtube.com/v/kQmFpwiU3QY?hl=en_US&version=3″ /><param name=”allowfullscreen” value=”true” /><embed width=”420″ height=”315″ type=”application/x-shockwave-flash” src=”http://www.youtube.com/v/kQmFpwiU3QY?hl=en_US&version=3″ allowFullScreen=”true” allowscriptaccess=”always” allowfullscreen=”true” scrolling=”no” /></object>
I am disabling the recommended plugins now.
Add widgets to page, Advertisement management (google ads), iframe, and linkwithin are all disabled now. Still infinite scrolling(no pun intended). Although that plugin for jetpack is not loaded from what I can tell. The infinite scroll says it needs info from the Organic theme that is being used but it isn’t provided.
“At this time, your theme, Organic NonProfit, doesn’t support Infinite Scroll. Unlike other Jetpack modules, Infinite Scroll needs information from your theme to function properly.
Until your theme supports Infinite Scroll, you won’t be able to activate this module.”
Could you try replacing the embed code with the youtube URL, on separate line?
Added the link you gave me and removed the object code. Or did you just want the embed tag removed?
The strange thing was when I removed the original link in the embed code and inserted the shorter link the embed wouldn’t load the video site but the issue was still present with the longer scrolling. There just wasn’t anything to see
I turned everything back on ( i have to leave) but it looks like it is the object/embed code itself for the link. I will play with it some more after I can get some more time to work with it
Sorry for the confusion.
You can remove the whole embed code. WordPress will take care of the embedding if you just paste a Youtube URL on a separate line, as explained here:
- The topic ‘[Resolved] Mobile Theme with Youtube Link on iPhone (webkit)’ is closed to new replies.