YouTube embed not working in iOS 8 Safari and Chrome

Posted on EDT by Michael "Spell" Spellacy

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. Eep!

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.

Reported

About the Author

Michael Spellacy

I am Michael "Spell" Spellacy, Director of User Interface Design and Development at TMP Worldwide. If you have any questions, feel free to contact me on Github or follow me on Twitter.

Moderators

Contributors

If you wish to contribute, fork this project, make some changes, and create a pull request.

New to GitHub? Learn the basics with the guide and learn the GitHub flow.

Quality Assurance and Accessibility

All patterns, layouts, and functionality are tested against our supported browsers. We also look for accessibility issues via automated and manual testing tools. TMP is committed to the accessibility of its websites and products and strives to meet as much of WCAG 2.0 Level AA as possible. If you discover any problems with our work, please open up an issue and let us know about it or contact Michael Spellacy.

Return to top