YouTube video does not play on iOS

[insightgraphics]

A YouTube video embedded in a page does not play on iOS — iPhone (6s) & iPad (Air I).

The video plays fine on my Mac, but when I visit that page on my iPhone or iPad, all I get is the still image with a red (not black) play button on top, and the video does not play. However, if I go directly to YouTube.com on these devices, and enter the same URL I embedded, the video does play on the YouTube site in Safari.

I also have a Vimeo video on this site, and it does play on all devices.

I embedded both the YouTube and Vimeo videos the same way. I placed a Video element within a Column element and pasted in this code in the “Edit Options” panel for the Video element’s settings:
https://www.youtube.com/watch?v=c1YuRZVXHMw

I tried disabling the plugin “Hide YouTube Related Videos” — but that did not help. (I’ll have to re-enable it soon, before showing the client.)

Here’s the page with the YouTube Video that does not work on iOS:
http://insightgraphicdesign.net/test/crossroads/rose-manor-residential-treatment-for-woment/

(Here’s the page with the Vimeo Video — this does work on all devices:
http://insightgraphicdesign.net/test/crossroads/veterans-assistance-center/)

I am using the latest versions of Denali: 1.0.1, WP 4.3.1, and a child theme.
Hope you can help!

• This topic was modified 7 years, 7 months ago by insightgraphics.

Topic

[Jason Bobich]

Hi,

I can see the same issue on my end, but unfortunately, I’m not sure on that one. I’m not sure how it could be anything to do with the theme? Are you sure you’re not using any plugins on your site that do anything with YouTube videos?

I tried to reproduce the issue you’re having as best I could, but I can’t on my end. I added a columns element like yours to a page with same video. All works fine on mobile for me.

http://demoblvd.com/themes/denali/demo-1/test/

[insightgraphics]

Thank you very much for your prompt response and your test — it helped me figure out where to look.

It’s a conflict with the Slider Revolution plugin, which is worsened with the Denali theme.
— with the Denali theme, YouTube videos do not play on BOTH iPhone and iPad (both on latest iOS 9.0.2)
— without Denali theme, on TwentyFifteen, YouTube videos DO play on iPhone, but they still do not play on iPad.

Test site 1: http://insightgraphicdesign.net/test/slidertest/youtube-test
— Twenty Fifteen theme
With Revolution Slider plugin activated, YouTube works on iPhone, does not play on iPad.
Simply deactivating the plugin makes YouTube videos play fine on both devices. (No actual sliders were made.)

Test site 2: http://insightgraphicdesign.net/test/denali0/
— Denali theme + theme’s plugins (issue persists even with theme’s plugins off)
With Revolution Slider plugin activated, YouTube does not work on iPhone or iPad. Simply deactivating Revolution Slider makes YouTube videos play fine on both devices.

Both Test sites:
— Clean install WP 4.3.1
— Revolution Slider 5.0.9
— no added plugins or themes
— testing iPhone and iPad — both on latest iOS 9.0.2

I’ve put a ticket in to ThemePunch, and I’ll post any answers they find, but maybe you can help figure it out? Or figure out some workaround for me to keep my slider and my YouTube videos?

[insightgraphics]

Just discovered another clue:

In the Twenty Fifteen theme, with the Slider plugin, the YouTube videos ONLY do not play on the iPad when it is held in Landscape (wide) view. They DO play when the iPad is in Portrait (tall) view — but you have to reload the page. And they DO play on the iPhone, whether it is held horizontally or vertically.

But with the Denali theme, when the Revolution Slider is activated, YouTube videos do not play at all on iOS, not on iPhone or iPad, not tall or wide.

So the plugin’s problem is ONLY with the iPad held horizontally.
But the theme’s problem is with ALL iOS devices, when the plugin is activated.

Could there be a simple css @media query fix?

[insightgraphics]

Mystery solved!
The issue is not your theme at all, but a bug in the Revolution Slider that they promise to fix in the next update.

Oddly, YouTube videos won’t play if:
(1) Slider Revolution plugin is activated,
AND (2) a WordPress (default) search widget is visible on the same page with the YouTube video.

This is why it seemed “worse” in Denali than in Twenty Fifteen — because I had the WP search widget in the footer of your theme (constantly visible and constantly adding to the conflict, no matter what device or orientation) while the default Twenty Fifteen theme moved the search widget off the page, into the hamburger off-screen menu, in all mobile views except for the iPad horizontal view. So with Denali + footer search widget, videos didn’t play in ALL iOS views, but in Twenty Fifteen the bug only happened in iPad Horizontal view because the WP search widget was in the sidebar; but in smaller screen views the search widget moved off under the Hamburger menu.

This is probably why you couldn’t reproduce the bug — I’ll bet you didn’t have a search widget on the same page with the YouTube video.

Solution:
ThemePunch (Slider Revolution) offers this temporary fix while they work on the permanent fix:

open the public/assets/css/settings.css and search for: 

.rev-scroll-btn > *:hover,
.rev-scroll-btn > *:focus,
.rev-scroll-btn > *:active,
.rev-scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

and replace it with:

.rev-scroll-btn > *:hover,
.rev-scroll-btn > *:focus,
/*.rev-scroll-btn > *:active,*/
.rev-scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

Just commenting out that one line of css fixes it!

[Author]

Replies