Multiple YouTube players do not load on iPad

I notice that sometimes if I hit the back button and return to a page where the videos did not display, they work properly. It only works with the back button, though; if I return to that page in any other way, I can’t see the videos.

hiya alex;
don’t have an iphone or ipad to reproduce, but did a quick test by changing the useragent to iOS in firefox and all seems fine, but that does not prove a lot. I suspect some (javascript-)resource isn’t loading properly, resulting in ly.te() not being triggered.

not sure how to confirm/ identify the culprit though. you could try to selectively disable other plugins to see at which point things unbreak?

frank

Frank,

Many thanks for your reply. I have confirmed that the problem is not your plugin, although I still can’t figure out what’s wrong.

As you suggested, I tried turning plugins off. With only my theme (Twenty Fourteen child) and WP YouTube Lyte running, I was still running into the problem of videos not loading. I switched to Twenty Fifteen, and the problem persisted.

Then I tried reverting to my old video plugin, ARVE — it had problems. Then I tried oEmbeds with WP Rocket iframe lazy loading. The problem persisted.

Simple oEmbeds without any lazy loading work perfectly (but they’re slow and ugly, right?). So the problem has to do with lazy loading, but I’m not sure what the problem is and why it started happening so suddenly. Interestingly, a3 Lazy Load *does* work, so I’ll use it for now. I want to troubleshoot my setup, though, as I’m happiest using your plugin. Luckily, though, since I’ve switched to simple YouTube URL format, I can turn your plugin on and off while testing without having to change a lot of shortcodes.

Many, many thanks for your excellent work.

Alex

OK, what you could do, is remove some mobile-specific code from lyte-min.js to force wp youtube lyte to also show lyte video’s on mobile browsers (downside: users will have to click twice to play the vid, once to replace the lyte-vid with the YT iframe and once to have the YT vid actually play, as there’s no autoplay on mobile).

To accomplish this, open up wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js, find

var i=navigator.userAgent.match(/(iphone|ipad|ipod|android)/i)

and change that into e.g.

var i=navigator.userAgent.match(/(iphonelyte|ipadlyte|ipodlyte|androidlyte)/i)

and you’ll have lyte everywhere which will most likely work on your overview pages as well.

frank

Frank,

I’ve solved the problem. It’s quite bizarre, actually; I’d be curious to hear what you think.

On my website there are over 100 YouTube embeds and only two MP3 embeds. One of the MP3 embeds is the newest item in the blog. In any page view where it appears, the Lyte embeds don’t load. So the front page doesn’t work, and neither does any archive page that includes the MP3 post. Do you think there’s a conflict between the WordPress Media Element player and YouTube Lyte that only affects iOS? Maybe only on my website? — but I did try stripping down to just the theme and your plugin.

By the way, thanks for the JavaScript trick — I think a lot of people like it to work that way by default, but others really hate clicking twice, don’t they?

Alex

Actually, considering that Advanced Responsive Video Embedder and WP Rocket’s iframe lazy loader had the same problem, it looks as if it’s really Media Element that’s at fault.

Yes, there’s definitely a conflict between the native WordPress audio embeds and some ways of lazy loading videos. I just set up an installation of WP and added your plugin. I posted some YouTube videos. They looked fine. Then I embedded an mp3 in a post. Now the videos don’t load.

were you able to see if the JS-trick changed anything when mediaelement is active as well?

frank

No, the JS trick does not fix the problem. I still get black rectangles.

I did some experiments on three websites, and I now think that the problem occurs whenever there’s an audio tag with preload=”none”. I can reproduce the problem without using the WordPress [audio] shortcode; if I just type

<audio controls preload="none"><source src="audio.mp3"><audio>

I get a simple audio player, but it still prevents the videos from loading. iOS seems to handle “preload” oddly. If I change it to preload=”auto” the problem seems to go away, but that’s undesirable for other reasons – most browsers will download the file immediately. It looks as if preload=”metadata” is not a reliable fix.

I think there’s probably a way to fix this problem by using JavaScript to detect if the user is using iOS; if he is, then change preload=”none” to preload=”auto” on any audio tags. Luckily, in iOS browsers, preload=”auto” does not actually preload anything.

I’ll give this a try myself and let you know if it works.

Alex