Tag Archives: html5 video

The state of WP YouTube Lyte (now with fresh Pomplamoose)

Although it has been a few months since I last wrote about my baby WordPress plugin, time did not stand still between version 0.3.0 and 0.5.2; the player size can now be changed in the options-screen, I’ve replaced my newTube html5-hack with Google’s official (yet experimental) new html5-compatible embed code and I started migrating the CSS from the mess that had become the JavaScript-file. And I almost forgot what may be the most important change; I started searching for blogs that use WP-YouTube-Lyte to see how it behaves in the wild. Some of the bugs I discovered that way;

But with all those changes you might start to wonder if WP-YouTube-Lyte still reduces download size & rendering time substantially, no? So I ran a couple of new tests for this page on my blog (it has 3 embedded YouTube’s) on webpagetest.org (settings: 5 runs on IE7 via Amsterdam, excluding requests to stats.wordpress.com). The difference is … well, judge for yourself (or see below the tables for the summary)

With normal Flash-based embeds (full results here):

Document Complete Fully Loaded
Load Time First Byte Start Render Time Requests Bytes In Time Requests Bytes In
First View 1.850s 0.634s 1.330s 1.850s 15 343 KB 5.350s 22 524 KB
Repeat View 1.142s 0.346s 0.497s 1.142s 5 17 KB 2.455s 5 17 KB

And with WP YouTube Lyte (full results here):

Document Complete Fully Loaded
Load Time First Byte Start Render Time Requests Bytes In Time Requests Bytes In
First View 1.201s 0.355s 0.974s 1.201s 10 55 KB 2.065s 20 103 KB
Repeat View 0.605s 0.352s 0.473s 0.605s 2 12 KB 1.447s 5 14 KB

Did you see that? Less requests, less data and faster rendering for first and repeat views. Hurray for WP-YouTube-Lyte! But enough with that ego-tripping already, I’ve got an Opera-bug to look into! Or wait, I’ll watch this great new Pomplamoose+Ben Folds+Nick Hornby¬† videosong first:

Ben Folds, Nick Hornby, & Pomplamoose VideoSong!!!!
Watch this video on YouTube.

Embedding HTML5 YouTube video with WP YouTube Lyte

I re-implemented newTube.js, an earlier experiment to embed HTML5 YouTube video, into my WP YouTube Lyte plugin. This means that WP YouTube Lyte (for easy lite YouTube embeds, reducing download size & rendering time substantially) can now also use the HTML5-based YouTube video-player to play your embedded video.

If the -experimental- HTML5 option is enabled, WP YouTube Lyte will embed HTML5 YouTube video if:

  • Your visitor uses a browsers that supports the h264 (Safari, Chrome, IE9) or WebM (currently development versions of Chrome, Opera and Firefox) video codecs
  • Your visitor is enrolled in the YouTube html5 beta

If these requirements aren’t met, your visitors will see a Flash-based version of the YouTube video you specified.

As newTube.js is sort of a dirty hack which replaces the LYTE dummy player with an iframe with overflow:hidden, in which the full YouTube-page is carefully positioned to display only the player, there are some other caveats to take into account as well:

But apart from all this small print, is works rather nice if I may say so myself. Or better still, just look at this little They Might Be Giants gem embedded here;

They Might be Giants-Birdhouse In Your Soul
Watch this video on YouTube.