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 CompleteFully Loaded
Load TimeFirst ByteStart RenderTimeRequestsBytes InTimeRequestsBytes In
First View1.850s0.634s1.330s1.850s15343 KB5.350s22524 KB
Repeat View1.142s0.346s0.497s1.142s517 KB2.455s517 KB

And with WP YouTube Lyte (full results here):

Document CompleteFully Loaded
Load TimeFirst ByteStart RenderTimeRequestsBytes InTimeRequestsBytes In
First View1.201s0.355s0.974s1.201s1055 KB2.065s20103 KB
Repeat View0.605s0.352s0.473s0.605s212 KB1.447s514 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.