Youtube videos not playing on standalone Safari browser iOS 8

Question

Level 1

0 points

Youtube videos not playing on standalone Safari browser iOS 8

I have a very strange problem with an embedded youtube player on a web app, I am working on. The web app is "mobile capable" so when saved on a user homescreen, it opens up in a chromeless safari browser.

So here is my issue:

The YouTube player is embedded on one of the pages in the web app using an iframe, and when the "play" button is clicked and the app is open in the chromeless safari window, the video loads forever and never plays....however when this scenario is replicated in the regular safari browser everything works fine.

This started happening only after the iOS 8 update. This is happening on an iPhone 5 running iOS 8, and it previously worked fine on the same iPhone 5 under iOS 7. Additionally, I tested the app on an iPhone 5c running iOS 7, and an iPad Air running iOS 7 and everything works fine.

Side Note: I even changed the implementation to embed using an object instead of an iframe, and the same problem occurs with either one.

iPhone 5, iOS 8

Posted on Sep 24, 2014 11:24 AM

Reply

Answer 1

Apr 29, 2015 1:46 PM in response to Merich42

That is weird. I can confirm that the workaround does fix the issue on iphone 5/5s, Ipad 2, Ipad air, Ipad air 2, Ipad mini 1,2 and 3. Can you tell me what device you are using? Also have you kept your embed structure the same? Please review your code and make sure that it reflects the changes shown in the example I posted.

Reply

Answer 2

Apr 29, 2015 1:48 PM in response to modern artist

PS

Don't forget to refresh your browser and dump the cache then reload the webapp and see how it reacts.

Reply

Answer 3

Merich42

Level 1

0 points

Apr 30, 2015 6:11 AM in response to modern artist

Ok, so I guess I had the perfect storm of issues over here. Major credit to my coworker Spell (https://github.com/michaelspellacy) for digging this one up.
There appears to be a bug within iOS WebKit (and Blink) rendering engines. Under certain conditions, YouTube videos embedded within iframes cannot be viewed when a user clicks on the video, even with the "youtube-nocookie" addition.

The Bug

Applying the

:active

pseudo-class to a universal selector (*) and including a property of

-webkit-tap-highlight-color

seemes to be the culprit.

*:active { -webkit-tap-highlight-color: tomato; }

Now, here is the odd part. The bug is only triggered when the above CSS block is present and there is an

input

element present on the page with a type attribute value of "search".

The Solution

Either rename the input type to text, or (likely preferred) remove the -webkit-tap-highlight-color css attribute.

Reply

Answer 4

Apr 30, 2015 7:55 AM in response to Merich42

The full bug report can be found below (you can test both pages on iOS). Sites our company produces were having similar issue. Our case might be unique, but the solution I came up with might help others.

https://tmpworldwide.github.io/bugs/ios-tappy-bug.html

Good luck!

Spell (aka Couchtomato. Seriously, Apple?)

Reply

Answer 5

Apr 30, 2015 9:20 AM in response to couchtomato

Reported our particular issue to WebKit and Blink. We'll see what comes of it.

https://bugs.webkit.org/show_bug.cgi?id=144451

https://code.google.com/p/chromium/issues/detail?id=483025

Spell

Reply

Answer 6

Jun 28, 2015 12:17 PM in response to couchtomato

It was the type="search" issue for me! So crazy. I made a quick video in case it helps anyone else: https://www.youtube.com/watch?v=rrKxAIXnydE

Reply