Use HTML5 To Embed YouTube Videos

Hi! Everyone, hope you all are fine.
YouTube allows user by default to embed video using flash based video player on any website and web pages. Since most of the computers have the Adobe Flash Player plug-in, so your YouTube embedded video will play without any kind of issues. But when it comes to mobile web browser most of them don’t support Flash video. But the modern mobile supports HTML5 video <video> element.

Default code supports only Flash video

<object width="500" height="300">
<param name="movie" value="https://www.youtube.com/v/VIDEO_ID&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="https://www.youtube.com/v/VIDEO_ID&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="300"></embed>
</object>

Using new iframe code supports both Flash video and HTML5 video

<iframe class="youtube-player" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>

Embedding YouTube videos in iframe will help you and your users/readers to play the video in both flash and HTML5 for computer and as well as for the supported mobiles.
By embedding in iframe, YouTube will do all the work weather your user need to see in flash or HTML5. YouTube iframe automatically detects which is suitable for the viewers depending on their environment and preference. Environment that supports the HTML5 video player listed on the YouTube HTML5 settings page. You can also view the YouTube video in HTML5 on your computer by going to the YouTube HTML5 settings page and click on Join the HTML5 Beta at the end of the page.

As this new iframe code is now in preview period so you have to write the code by yourself till it get out of preview period and become the default code.
Here is the code that you have to write and change the Video_ID with your YouTube video ID.

<iframe class="youtube-player" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>


Image of Flash video using iframe in Computer


Image of HTML5 video using iframe in Computer


Default YouTube player


New iframe player

But when you play full screen in HTML5 player the video will pop up in to a new window with full size player. If your browser have full screen mode (in most of the browser by pressing F11 it goes in full screen mode) then you can watch it in full screen by going to the full screen mode or resize it to fit in the screen

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.