CODEWITHSUNDEEP
ipadiframeyoutubeyoutube-api
Andreas
Andreas

Reputation: 2366

YouTube html5player won't play on iPad safari; protocol and port exception

I have a strange error occurring only on safari for iPads. I've added a youtube iframe element to the page that looks like this.

<iframe width="560" height="315" src="http://www.youtube.com/embed/dDAB35SYIr0?rel=0" frameborder="0" allowfullscreen></iframe>

As you can see I say the source is http and my site is http as well. Now on iPad Safari I get this console error message

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://example.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

I think this is weird for two reasons 1. I specifically say "use http" 2. It works on other devices

Now if I change the protocol to https (now I'm on a https site as well) and try this, I get this error instead

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://www.example.com". Protocols, domains, and ports must match.

All errors references the html5player.js file.

How can I solve this? Thanks for your help

Upvotes: 0

Views: 715

Answers (1)

Andreas
Andreas

Reputation: 2366

Ok, so it seems webkit on IPad has a bug, a weird one. I read it here -> https://tmpworldwide.github.io/bugs/ios-tappy-bug.html

I'll quote a bit of it

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? 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 for now is to change to input type="search" to input type="text".

Upvotes: 0

Related Questions