YouTube Embed – iPhone & iPad Problem

Have you noticed a big black border around your videos when you embed them into your website and are viewing them on an iPhone or iPad device? So have I. This seems to be an HTML5 issue when being viewed only on mobile Safari browsers. Again, you will only notice the difference when viewed with an iPhone or iPad device. It will look normal otherwise.

NEW Code:

<iframe title=”YouTube video player” width=”560″ height=”349″ src=”http://www.youtube.com/embed/tPZfa7bZzF4?rel=0″ frameborder=”0″ allowfullscreen></iframe>

 

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


Here’s a few iPhone screen shots to show you the difference.

 

In other words, make sure to check the “Use old embed code” if you don’t want that big black border around your video.

 

 

This is hopefully a temporary solution until Google or mobile Safari figure it out.