Embedded YouTube videos won’t play on iPad, but play on PC & Android

[Ned]

This is the exact same problem as described in http://forum-archive.weavertheme.com/discussion/8591/playing-videos-on-ipad-issue

I had this problem with Weaver II Pro and the css coding workaround given in the above reference forum thread fixed it for me. However, that fix does not work for Weaver Xtreme.

Here’s my test page, http://imaginedwebdesign.com/vt/ 

My iPad is running iOS 8.3 and the problem occurs with both the Chrome and Safari browsers on that device.

[Weaver]

Your embed:

<p><iframe width=”940″ height=”529″ src=”https://www.youtube.com/embed/IseYgdUtm54?feature=oembed&#8221; frameborder=”0″ allowfullscreen></iframe></p>

works on a couple of test sites. For example, I put it up at http://demo.weavertheme.com/test-video/ (not on menu, and will delete after we get this solved), and it works on my iPad.

But your link does not. I’m guessing you have a z-index issue in some custom CSS.

But since your embed works on a “typical” Weaver Xtreme site, there is something different in yours. Could be custom CSS, could be a plugin. Your example doesn’t have any sidebars, so that doesn’t seem to be it. The demo site where it does work has a search in the header, so that doesn’t seem likely. That leaves plugins. Could be the multi-column plugin you have activated. Try disabling these one at a time.

[Ned]

Wow, @weaver, I can’t believe the instant response, even on a Sunday afternoon.

Yes, you may take my test video off your demo page.

I deactivated my plugins until I found this culprit: http://wp-types.com/home/views-create-elegant-displays-for-your-content/

I’m going to see if I can get some kind of fix (or even a response) from them, but it will be nowhere as fast as yours.

Great work.

[Ned]

OK, this is weird. I’ve been troubleshooting more and have another piece of the puzzle:

The embedded YouTube video will not play on the iPad, IF I have BOTH

1. the wp-types (views) plugin activated AND
2. I have the search form on the page (either in header or footer widget)

If I don’t use a search, then the video will play on the iPad, even with the Views plugin.

The reason I looked at search was because this previous forum posting, http://forum.weavertheme.com/discussion/8591/playing-videos-on-ipad-issue, found a solution by restyling the CSS for input[type=”search”]

Totally weird. Any insights?

[Weaver]

I’m not always checking all the time – it was just really rainy here yesterday, so I checked the forum B-).

So wp-types must be adding some CSS or extra <div>s or something. I did try the YouTube embed iframe code with a search, but don’t haven’t tried with wp-types. But it is odd.

Have you tried using the Weave Xtreme Theme Support [youtube] shortcode? It likely builds a slightly different interface to YouTube than their own embed code. 

[Ned]

Thanks, weaver, for the suggestion. I modified the my test page to include the video both ways, but the problem still persists with the shortcode implementation:

	<p>First with the YouTube raw link, on its own line</p>
	<p><iframe width=”940” height=”529” src=”https://www.youtube.com/embed/IseYgdUtm54?feature=oembed” frameborder=”0“allowfullscreen></iframe></p>
	<hr />
	<p>Then with the Weaver youtube shortcode</p>
	<div class=”wvrx-video wvrx-youtube” style=”margin-left:auto;margin-right:auto;max-width:100%;“><iframesrc=”//www.youtube.com/embed/IseYgdUtm54?fs=1&amp;iv_load_policy=1&amp;rel=0&amp;showinfo=1&amp;wmode=transparent” frameborder=”0” width=”16” height=”9“frameborder=”0” allowfullscreen=”allowfullscreen“></iframe></div>

…

Then I tried with some shortcode options (like percent=75) to see if I could make a difference in the “playability”, but none observed.

[Author]

Posts