Okay Geek Farm
How to embed HTML5 Youtube Videos
Brandon Davenport
After releasing (useless but epic) 4K video streaming, Youtube has taken another leap of faith and given us the ability to embed HTML5 Youtube videos. Now, why would you want to embed HTML5 videos? Well, what if people visit your website on an iPad, or an iPhone? Well now your embedded videos will be compatible with all iDevices, and browsers supporting HTML5… Double rainbow in HTML5 rocks my sox.
Step One
If your editing a blog post, open up the editor. If you’re editing a website, you know what to do — treat this like a regular embed code. The embed code is an iFrame, and it doesn’t require Flash, so you should see a significant speed increase.
Copy and paste this into your post/website
<iframe class=”youtube-player” type=”text/html” width=”600” height=”360” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0”>
Step Two
Replace the bolded text “VIDEO_ID” with the video ID of the video you want to embed. If you aren’t sure what the video ID is, check out the image above. This is the URL in your browser’s address bar. Make sure not to grab any characters around the ID. Usually there is text after the video ID, so be sure to cut that stuff off.
Step Three
Make sure the video player is the correct size. You can change the size by editing the width=”xxx” and height=”xxx” tags to make your video fit properly. This is measured in pixles, but because you’re lazy, we’ve included some default sizes for you.
Small (430 x 266)
<iframe class=”youtube-player” type=”text/html” width=”430” height=”266” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0”>
Medium (560 x 340)
<iframe class=”youtube-player” type=”text/html” width=”560” height=”340” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0”>
Large (640 x 385)
<iframe class=”youtube-player” type=”text/html” width=”640” height=”385” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0”>
Seriously? (853 x 505)
<iframe class=”youtube-player” type=”text/html” width=”853” height=”505” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0”>
Notes and points of interest
There are still a few bugs with the player, as I was unable to get the video to play on T3ch H3lp. Unfortunately, this is still in Beta (more like alpha) and its going to be a bit before Youtube can muscle up the HTML5 video frontier. I am really looking forward to more websites using this, so I will be able to enjoy the videos, without Flash putting a strain on my computer, and my browser. What do you think of the embeddable Youtube videos?
