YouTube Embed Not Working in iOS 8 Safari and Chrome
Published by Michael Spellacy (Spell) on
iPhone 5s Model: ME341LL/A
iOS Version: 8.3 (12F0)
Chrome Version: 42.0.2311.47
Update: This issue has been fixed in iOS 9.3! No need to use recommended fix!
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.
In TMP's particular instance, the conditions had to be just right. A "perfect storm" of issues, if you will. :)
The Bug
Applying the :active pseudo-class to a universal selector (*) and including a property of -webkit-tap-highlight-color seems to be the culprit.
*:active {
-webkit-tap-highlight-color: tomato;
}Now, here is the strange 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". I know, crazy, right?
<input type="search" placeholder="Search"/>Another oddity here is that when you apply focus to the search input, type something in, and then attempt to play video, it will then work.
The Solution
Either renaming the input type to "text" or removing -webkit-tap-highlight-color (likely preferred solution) should alleviate the issue.
Here is the page without the webkit-tap-highlight-color property.