Tuesday, July 27, 2010

Embed YouTube vidoes to blog or website with iframe - supports Flash and HTML5

YouTube users may often embed YouTube videos on their blogs or websites. And the embed code they use offered by YouTube is just for Adobe Flash Technology. Just as the code shown below:
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/whu-7wVg4W8&hl=en_US&fs=1">
<param name="allowFullScreen" value="true">
<param ame="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/whu-7wVg4W8&hl=en_US&fs=1" width="480" height="295" allowscriptaccess="never" allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash"></embed>
</object>
Advertisement by Leawo Free Video Accelerator - Watch and download online videos in high speed without buffering:
Watch Hot Hollywood movies for free

Flash is a great technology. Most of our browsers on computers have installed Adobe Flash Player so that we can easily view embedded Flash video on computer via Flash player without any problems.

Things are changed when we are using a mobile phone. The browsers in our mobile phone do not know Flash video and Flash technology. Besides, Flash technology is being replaced by HTML5. Furthermore, more and more new mobile phones begin to support HTML5, not Flash.

Under this situation, YouTube brings out iframe for video embedding, which means that we can now use iframe code to embed HTML5 video to our blogs or websites. So that we can view YouTube videos in both computer and mobile web browsers. The below code is examples using iframe code for YouTube video embedding, which supports both Adobe Flash technology and HTML5:

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


Example 2:
<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="329" height="190"></iframe>


Example 3:
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
Note:
1. These iframe code can automatically analyze what browser you’re using, and display Flash video or HTML5 video to you. For example, if you are using the brower that supports Flash technology, the code will display Flash; if not, the code will display HTML5 video.
2. Currently on YouTube, the new iframe embed code is during testing phase, so it needs to be written by you manually.
3. All the above iframe code work. You can feel free to choose one of them to embed YouTube videos to web page.

In the near future the iframe embed code will be the default code for video embedding for YouTube. By then we shall be able to conveniently view videos on iPad, iPhone and other mobile devices.

Relevant news:

1 comment:

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    ReplyDelete