Open Radar

 
Summary:
Under certain conditions, YouTube videos embedded within iframes cannot be viewed when a user clicks on the video.

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;
}

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". 

<input type="search" placeholder="Search"/>

If you apply focus to the search input, type something in, and then attempt to play video, it will work.

The (Temporary) 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.

An overview of this bug and an example to try out in a browser can be found here:

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

This reproduces on mobile Safari, mobile Chrome, and a UIWebView wrapper application, but not on desktop.

Also reference 
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=144451
Chromium bug: https://code.google.com/p/chromium/issues/detail?id=483025

Steps to Reproduce:
1. Navigate to https://tmpworldwide.github.io/bugs/ios-tappy-bug.html
2. Click on the embedded video.

Expected Results:
Video should play.

Actual Results:
Video does not play.

Version:
iOS 8.3