<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - YouTube embed not working in iOS 8 Safari and Chrome"
href="https://bugs.webkit.org/show_bug.cgi?id=144451">144451</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>YouTube embed not working in iOS 8 Safari and Chrome
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>525.x (Safari 3.2)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 8.2
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>michael.spellacy@tmp.com
</td>
</tr></table>
<p>
<div>
<pre>iPhone 5s Model: ME341LL/A iOS Version: 8.3 (12F0)
Under certain conditions, YouTube videos embedded within iframes cannot be viewed when a user clicks on the video.
In our 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, but this obviously might be a rendering bug.
You can the same overview here, and see the bug in action for yourself on any current iOS device.
<a href="https://tmpworldwide.github.io/bugs/ios-tappy-bug.html">https://tmpworldwide.github.io/bugs/ios-tappy-bug.html</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>