futtta's blog

Frank Goossens' Twitterless twaddle

Embedding YouTube HTML5-video with newTube

with 8 comments

With all the discussions about the place of Flash on the ever-evolving web and the excitement following Google’s announcement about YouTube going HTML5, one would almost forget that YouTube is only at the very start of their “open video” endeavor. The limitations of the current implementations are numerous; there’s no OGG (damn), no ads (yeah!) and no embedding either (damn) for example.

After looking into ways to call the YouTube mp4-file from within a Video for Everybody html-block (which is not possible, Google protects raw video-files using what seems to be a session-based hash that has to be provided in the URL), I decided to take another (dirty) approach; faking it!

The solution is entirely javascript-based and is as un-elegant as it is simple; create a html-file with a script include of http://futtta.be/newTube/newTube.js and a div with “id=newTube” containing a link to a YouTube-page and the script automagically takes care of the rest. Check out http://futtta.be/newTube/ to see it in action.

The result is an embedded YouTube player which will display the HTML5-version if you’re running a browser which supports mp4/h264 playback (i.e. a recent version of Chrome or Safari) and if you enrolled in the beta. If either of these preconditions aren’t met, you’ll just see the plain old Flash-player.

Don’t get your hopes up too high,  newTube is probably not as obvious as normal YouTube embeds (for reasons I’ll get into in a follow-up post, when I have some time to spare that is). You’ll have to wait for someone (YouTube, Dailymotion, Vimeo, … are you listening?) to offer real embeddable html5-video (with support for both mp4/h264 and and ogg/theora).

But I did have fun creating the very first html5-capable embedded YouTube-player ;-)

Share this:
  • Digg
  • del.icio.us
  • Facebook
  • Google Reader & Buzz
  • LinkedIn
  • Twitter
  • FriendFeed
  • Posterous
  • StumbleUpon
  • Tumblr
Possibly related twitterless twaddle:

Written by frank

February 4th, 2010 at 12:12 am

Posted in Web development,browsers,lang:en

Tagged with , , , , ,

«
»

8 Responses to “Embedding YouTube HTML5-video with newTube”

  1. der Flo

    6 Jun 10 at 00:13

    Thank you very much, i included it on my webpage. Great work …

    BTW: i changed it from (div id=”newTube”) to class=”newTube”, so it is possible to have multiple videos on one page.

    Reply

  2. frank

    17 Jun 10 at 13:15

    I’ve re-implemented newTube.js as part of my wp-youtube-lyte wordpress-plugin, more info in this post

    @der flo: indeed; makes a lot of sense, lyte (part of wp-youtube-lyte) works that way as well. had to include some code to do crossbrowser getElementsbyClassName though :)

    Reply

  3. Sammy

    30 Jun 10 at 07:57

    Great work! Be good if you are able to re-size the height and width via url or something to =]

    Reply

    • frank

      30 Jun 10 at 08:15

      thanks sammy. resizing will probably not be possible, as the size of the player is the size it has on YouTube itself.

      Reply

  4. busa

    17 Jul 10 at 11:58

    thank you . great work!
    i was trying to have more than 1 video in a single page,, but the getElementsbyClassName seems not no work.
    i change from id to class in html code and getElementById to getElementsbyClassName in the js but the result is no video!

    Reply

  5. frank

    17 Jul 10 at 12:39

    Did you add the getElementByClassName-code to your ja?

    I implemented HTML5-youtube embeds in my wordpress-plugin, you can check out the js-code in lyte-newtube-min.js to see how to implement getElementByClassName there?

    Reply

  6. busa

    19 Jul 10 at 13:09

    i add you getElementByClassName-code js and change from id=”newTube” to class=”newTube” but it doesn’t seem to work..

    Reply

    • frank

      19 Jul 10 at 13:29

      ok, different approach: enter your video’s like this and all should be well (you’ll be eating my bandwidth though ;-) ):

      <html>
      <body>
      <div class="lyte" id="8ADwPLSFeY8">
      <div class="lyte" id="QQPSMRQnNlU">
      <script src="http://blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-newtube-min.js">
      </body>
      </html>

      feel free to check the code in lyte-newtube-min.js and/or moving it (including the images) to your server :-)

      Reply

Leave a Reply