Archive for the ‘html5 video’ tag
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;
- WordPress has a lousy “the_excerpt”-function which removes script-tags but not the script itself, which caused my JavaScript to be displayed as normal text in excerpts (typically in category-pages). Fixed with some unpleasant CDATA-tinkering.
- Some blogs allow crawlers to see the contents of a directory if no index.* is in place, so e.g. options.php gets indexed with an ugly (but logical) error-message. Fixed with an index.html.
- There’s a lot of themes and some of those have CSS that impacts the way WP YouTube Lyte is displayed. Most issues should be fixed by better CSS for my plugin, but do let me know if you encounter more weird display-problems (especially the controls that are incorrectly positioned).
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:
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:
- It might break if YouTube implements x-frame-options for their video-pages
- Positioning of the player might be a few pixels off in some browsers
- Some buttons in the embedded player (e.g. view full screen) won’t function properly
- This might (not) work on iPhone/ iPod/ iPad’s (there are known issues with iframes & overflow in mobile Safari that might affect html5 embedding, feedback is welcome)
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;
