Youtube Adds HTML5 Embedding To Videos - gHacks Tech News

Youtube Adds HTML5 Embedding To Videos

The popular video hosting site Youtube has been offering limited beta HTML5 viewing capabilities for some time now on their website. HTML5 video playback was limited to Google Chrome and Safari, and only directly available on Youtube after joining the beta channel.

Webmasters and Internet users who wanted to embed videos on third party websites had no choice but to embed the Flash player, as there was no option to change the embed code to HTML5 video.

Toliver Jue, a Youtube Software Engineer, revealed that Youtube has created an option to embed HTML5 Youtube videos in websites.

The embed code is currently not available for selection on Youtube, developers and webmasters need to copy, edit and paste the new embed code manually to make use of it.

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

The VIDEO_ID parameter needs to be replaced with the ID of the Youtube video. To embed the video http://www.youtube.com/watch?v=0ud-pdJh8S8 a webmaster would use the following code:

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

This returns the following video (great song btw):

The new embed code offers several benefits over the standard one. Supported HTML5 video browsers will make use of that technology to present the video, users without a HTML5 capable browser, or an unsupported browser are able to view the video in Flash as usual.

"An additional benefit of the new embed style is that it will eventually allow embeds to work on mobile devices, which typically use a built-in player instead of Flash or HTML5", says Toliver.

The new embed code will sooner or later make its way on Youtube, to replace the current embed code. This is good news for users without Flash. Now if Youtube would only begin to add other HTML5 video capable web browsers to the list of supported browsers.





  • We need your help

    Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

    We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.

    If you like our content, and would like to help, please consider making a contribution:

    Comments

    1. Ahmad said on July 25, 2010 at 9:53 pm
      Reply

      awesome article, thanks for sharing, nice song…

    2. Jojo said on July 25, 2010 at 10:36 pm
      Reply

      I am reading this in FF 3.6.8 but I still see a FLASH symbol (code behind it is:

      http://www.youtube.com/v/0ud-pdJh8S8&showinfo=0&enablejsapi=1&et=OEgsToPDskI5nTAvRKnneVdhqiyiX72s&hl=en_US&el=embedded&version=3&fs=1)

      Isn’t FF an HTML 5 capable browser?

      AND I am curious as to what will happen with HTML5 videos. Will they start playing automatically? Will I have any control over what I want to play?

      I like video’s in flash because using Flash Block, I can choose to let them run or ignore them.

      1. Martin said on July 25, 2010 at 11:11 pm
        Reply

        Youtube currently only supports Chrome and Safari.

      2. Martin said on July 25, 2010 at 11:12 pm
        Reply

        Jojo, you get a play option, they do not play automatically.

    3. Paul(us) said on July 25, 2010 at 11:50 pm
      Reply

      Hoi Martin, Talking Eels i personally think that, from Hombre Lobo – 12 Songs of Desire [2009]) Fresh blood is not bad at all.

      1. Martin said on July 26, 2010 at 12:12 am
        Reply

        I really like all songs of that album, maybe Tremendous Dynamite and Lilac Breeze the most.

    4. Chocobito said on July 26, 2010 at 7:12 am
      Reply

      You forgot mention that Opera also had HTML5 Video Support. :|

    Leave a Reply