March 23, 2012 at 10:08 am | Design, Programming, web.

Seems like a lot of people are having problems with youtube iFrame embeds working correctly on iOS devices (iPhone, iPad). Sometimes they will work, other times they wont. I have seen a bunch of different fixes for this but nothing that worked consistently for me.

The problem seems to come from the extra parameters that people put at the end of the URL string to get certain functionality. Some of these are very nice additions that Youtube has put in there.

All of the following query string parameters that the Youtube iFrame uses to add functionality to the embedded video, will cause problems when the URL is used to load an HTML5 video for the iOS device.

HTML with params

<iframe width="519" height="350" src="http://www.youtube.com/embed/D2p0UKDrC_o?
  enablejsapi=1&amp;version=3&amp;rel=0&amp;controls=1&amp;playerapiid=ytplayer&amp;modestbranding=1&amp;autohide=1" 
frameborder="0" allowfullscreen></iframe>[text]

HTML without the params.

<iframe width="519" height="350" src="http://www.youtube.com/embed/D2p0UKDrC_o" 
frameborder="0" allowfullscreen></iframe>

You can use a JS script to load one iFrame for regular users and one for iOS devices

Gist with how to check for iOS and how to embed with a function