YouTube released a new capability to embed YouTube videos on website. This new capability is to embed videos thru IFRAME code. Earlier it was added as flash code where OBJECT was used to embed but that was not good for non – HTML5 browsers having no flash. Since now almost all browsers whether desktop or mobile are having HTML5 support and that’s why YouTube has come up with new option for embed. Here we will see why YouTube released a new capability i.e. IFRAME embed and how that is going to benefit us. We will also see what happens to Flash embed code.
By embedding YouTube videos on your webpage thru IFRAME, you can get the HTML5 player (new one) of YouTube on your website. If your browser doesn’t support HTML5 but having flash plugin installed, then video will be visible on flash player automatically. That decision making capability is there inside the IFRAME code embed. That means when you are using IFRAME code for embed, YouTube will check the capability of the browser and will show video accordingly. Flash player format faces problem on mobile device and so by embedding IFRAME code, you can be sure that on modern browsers on mobile phones, your video will be viewable.
IFRAME embed for YouTube is a WordPress plugin to let you embed YouTube videos thru IFRAME code without writing any piece of HTML code. You just need to paste the YouTube video URL in a tag and then that video will be embedded in post thru IFRAME code.
Here is an example of YouTube videos embedded thru IFRAME code (HTML5 + Flash Support) and OBJECT code (Flash only).
Video embedded with IFRAME code
Code used to embed above video:
[sourcecode language=”HTML”]
<iframe height="385" src="http://www.youtube.com/embed/VKIcaejkpD4" frameborder="0" width="640" type="text/html"></iframe>
[/sourcecode]
Video Embedded with OBJECT code
Code used to embed above video:
[sourcecode language=”HTML”]
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/VKIcaejkpD4&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VKIcaejkpD4&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
[/sourcecode]
You can see the difference in above players as the first videos is playing on the latest player of YouTube while the second video is playing on old flash player of YouTube. You can right click on second video and see the flash player info at bottom of the menu.