Embed YouTube Videos In HTML5 [New YouTube Embed Code]

This post is mostly for bloggers. Since we're fans of HTML5 (or you could say we hate Flash, it's all the same), we decided to share this with our readers since a lot of them own a blog and this will make their readers happy since they no longer have to watch the embedded YouTube videos in Flash.

An update to the YouTube embed code which uses <iframe> allows your blog readers to view the video in whatever they have set in their YouTube preferences. This means that if they chose to view the videos in HTML5, embedding the videos on your blog / website using the new embed code will show up for them in HTML5 - just as if they were watching the video directly on the YouTube website.

This new YouTube videos embed code is not yet default, so you'll have to insert it manually. This is how the code looks:

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

All you have to do is paste the code above in your blog posts and modify the VIDEO_ID with the id of the video you want to post (the video is is the numbers and letters after "watch?v=" in the video URL). You can of course edit the width / height in the code above.

Here is an example of an HTML5 embedded video (it's HTML5 only for those who enabled it):

[via YouTube API blog]

How To Save WebM Videos From YouTube And Play Them In Ubuntu

Now that YouTube supports WebM (actually, since it supports HTML5), it's easier than ever to download the videos - all you have to do is look at the page source (remember to enable HTML5 for YouTube first) and search for "videoPlayer.setAvailableFormat": you should see some links and next to it, the video quality is displayed, like so:

Once you find the link for the video quality you want to download (unfortunately 1080p is not available in WebM yet), simply paste it in a new browser tab, then save it to your desktop and rename it to something .webm (whatever name you want, but append the .webm extension).

Here is a link example for a 720p video:

http://v11.lscache3.c.youtube.com/videoplayback?ip=0.0.0.0&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Calgorithm%2Cburst%2Cfactor%2Coc%3AU0dWTFNPT19FSkNNNl9LSVND&fexp=902303%2C900036&algorithm=throttle-factor&itag=45&ipbits=0&burst=40&sver=3&expire=1277341200&key=yt1&signature=725573BEE680BE61FC7219EE7DEC403E9D9FAFDA.6A2978DB9D871FAEE833082A2D16A9A3927F09CB&factor=1.25&id=3888ed5b82778824

To be able to play the video, you need a WebM capable video player. The easiest way is to install the latest Gstreamer packages and then simply use Totem ("Movie player"):

sudo add-apt-repository ppa:gstreamer-developers/ppa && sudo apt-get update && sudo apt-get upgrade

You will get an error when upgrading to the latest gstreamer packages but don't worry, it can be fixed by simply running the following command:

sudo apt-get -f install

Note: Don't worry, installing the latest Gstreamer packages from the Gstreamer dev PPA will not break the audio/video playback for any media players!

You will also need the gstreamer0.10-plugins-bad package to be able to play WebM videos:

sudo apt-get install gstreamer0.10-plugins-bad

Now the only thing left to do is set Totem as the file association for .webm files - you have to do this manually by right clicking a .webm file and then selecting Propreties > Open With and add Totem ("Movie Player"). That's it!

How To Install Firefox 3.7 (4.0) With WebM Support In Ubuntu Linux [PPA]

WebM is a new open source project suppored by Google, Mozilla, Opera and many others which uses the VP8 video codec Google aquired from On2 as well as Vorbis audio for HTML5 videos (HTML5 uses a built-in codec so you don't need Adobe Flash for viewing videos from YouTube for instance - which results in a very low processor usage compared to Flash and so on).

Firefox 3.7 (soon to be 4.0) got WebM support yesterday. The Ubuntu Mozilla Daily PPA for Ubuntu got this new builds so you can finally install Firefox with WebM support in Ubuntu - for 32bit only for now.

Besides WebM, Firefox 3.7 (4.0) from the Mozilla Daily PPA also features the new extension manager:

Please note that Firefox 3.7 is unstable so expect to find bugs! Also, this PPA will update your Firefox 3.6 to the nightly. If you don't want this, after installing Firefox 3.7, remove the PPA!

Install Firefox 3.7 (aka 4.0) in Ubuntu using the following commands:

sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
sudo apt-get update && sudo apt-get install firefox-3.7

Firefox too needs libvpx but for some reason, this is not available in the Ubuntu Mozilla Daily PPA. But you can install this from Chromium Daily PPA:

sudo add-apt-repository ppa:chromium-daily/ppa
sudo apt-get update && sudo apt-get install libvpx0

And there you have it - Firefox 3.7 (aka 4.0) with WebM support.

To use WebM on YouTube, enable HTML5 and try some WebM videos like this one. Note: for some reason I was unable to view videos in 360p using WebM, but the videos in 720p worked great.

How To Get WebM Support In Epiphany Web Browser

Epiphany web browser is probably the only browser which doesn't need an update to be able to display WebM videos.

You do need however an updated Gstreamer which Ubuntu users can install from the Gstreamer devs PPA:

sudo add-apt-repository ppa:gstreamer-developers/ppa && sudo apt-get update && sudo apt-get upgrade

If at this point you get an error about some package trying to overwrite a file in some other package, you can easily fix it using the following command:

sudo apt-get -f install

Then also install Gstreamer plugins bad:

sudo apt-get install gstreamer0.10-plugins-bad

At this point you'll be able to watch WebM videos in Epiphany web browser. For YouTube, don't forget to activate the HTML 5 mode.

Chrome / Chromium: Full-Screen Button For HTML5 Videos [Extension]

YouTube, Dailymotion and other websites already allow you to view HTML5 videos, but they don't come with a full-screen button.

For Google Chrome / Chromium, there's an extension which easily fixes this by adding a button where the old full-screen button used to be on YouTube:

(full-screen button added in the bottom right corner)

Here is how the video controls looked before using the Chrome / Chromium HTML5 full-screen (button) extension:

The extension also adds a button in the Omnibar (where applicable) for the rest of the websites which support HTML5 such as Dailymotion and so on:

Once you click the full-screen button, the video will open as full-screen in a tab so if you want to go truly full screen, press F11.

On it's page @ Chrome Extensions, there are also links to install a full-screen button to be placed to the right of the Omnibar as well as context menu (right click) full-screen option.

Install HTML5 Full-Screen Chrome / Chromium extension.

Download Chromium, Firefox And Opera WebM (VP8) Enabled Builds

Both Firefox and Opera already released WebM (VP8) capable nightly builds which you can download from here:

• Firefox
• Opera (10.54)
• Chromium

To run Opera in Ubuntu, download the archive, extract it and double click the "opera" file. Then try out this video which already uses WebM (with VP8) - but don't forget to enable HTML5 for YouTube before watching the video.

Ubuntu users: if you want a WebM capable Chromium, add the Chromium daily PPA - the latest builds (as of 20 May) already have WebM support. Install it with:

sudo add-apt-repository ppa:chromium-daily/ppa && sudo apt-get update
sudo apt-get install chromium-browser chromium-codecs-ffmpeg-extra

"chromium-codecs-ffmpeg-extra" is required by WebM it seems.

Note: Google Chrome (not Chromium) will be getting WebM support starting with May 24.