Using the YouTube iFrame API to embed a video I have come across a strange bug.
The bug is only apparent on Mobile Safari (iPad3, mini and iPhone)
No matter what I do to set a specific height or width the links under the video do not work. It's as if the iFrames height is not being honoured by safari. After about 4-5 lines the links start working again.
I have seen one article which says you need to set the attribute scrolling="no" on the iframe but this is YouTube API embed so not possible.
Demo below:
http://jsfiddle.net/sidonaldson/rqRvx/2
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: 'J---aiyznGQ'
});
I'm experiencing a similar issue on mobile Safari on the iPhone. Loading multiple YouTube videos "disables" any links rendered below them and only allows you to play the videos in the order they were loaded. It's a very weird behaviour and what I've also found is that when you play the last video, the links become clickable again.
What I've discovered is that this happens only when the viewport meta tag is used.
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Although removing it fixes the problem, I'm not sure this is something you'll want to do for a mobile web app.