The latest in a series of Eureka moments concerning deviously tricky problems, this one drove me nuts. But it’s over now. Monster’s gone. Think of this as therapy.

The Problem

One of our clients (The Daily Express) had an issue affecting YouTube videos on their site. When they embedded the new(-ish) iFrame code on the site, it wouldn’t play for iPad users.

It wasn’t a problem at YouTube’s end, as the play button appeared properly, but there was an invisible layer that prevented the red button being played.

Travails

Well, the first suspect in anyone’s line up would be z-index. I used webkit’s web inspector to up the z-index to absurd levels. Starting at 50 and ending up at 9,999,999 before I cut my losses and moved on.

More Clues

The web inspector didn’t show anything in front of the movie and text above and below was selectable. Even the link to YouTube’s page was still clickable/touchable.

Trial by Trial and Error

So, now I cut through the HTML and take out huge chunks of code until it starts working. By reducing this code bit by bit, I could get the player working if I removed all input boxes on the page by using display:none.

Thinking glory was just a minute away, I turned off all custom styles on input boxes expecting to reproduce the success I had by hiding them. Alas, nothing.

To cut a long story short (too late), I made a local copy of the page with local CSS file. Cut the CSS (2,000+ lines) in half, then select the working half. Repeat until you’re down to one line.

J’accuse

So what was it?
a, object, input, :active, :focus {outline:none}
And dissecting further it became clear that just this
:active {outline:none}
is enough to stop YouTube / Brightcove / other iFrame content working on iOS devices.

The Solution

As we only really care about a:active and input:active, we were able to manipulate the CSS line to look like this
a, object, input, a:active, a:focus, input:active, input:focus {outline:none}
and still work.

But Why, But Why?

Good question. One to which I don’t have an answer. The content of iFrames can’t take any CSS from the parent container and as the links at the top of the page were working and the button was not, which makes me wonder. And why would it work when I took out the input boxes on the screen?

Perhaps if I have the time I can investigate, but for now I’m just relieved that it now works and we have a happy client once more.

So you can all have a tinker, I’ve included a video below and embedded that line of code.

The Proof

---

Filed under: Coding,CSS,iOS6,iOS7,iPad,iPhone,YouTube - @ October 15, 2013 6:03 pm