The new Youtube iFrame embed is great; however, it seems that there are still some bugs that YouTube is trying to fix. One of those bugs is displaying the iFrame embed code on iOS mobile devices. If you try embedding an iFrame youtube video on a page and view the page on an iOS device you are probably going to see that the width and height of the video are either expanded or not displaying with the correct ratio size.

There is a simple resolution to this. If the user is on an iOS mobile device we will display the object embed code; otherwise we'll display the iFrame embed code.

Using the code below we can easily solve this problem:

<?php 

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
?>

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed type="application/x-shockwave-flash" width="560" height="349" src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>

<?php } else {  ?>
      // display default iframe embed code.
<?php  }  ?>

Now, if the user is on an iPhone, iPad, or iPad device the page will display the old youtube object embed code. If the user is on any other device we will show the youtube iframe video embed. Hope this fix helps someone else ;)