We waren er bij, vorige week donderdagavond in het Sportpaleis! Ik ben nochtans geen concertganger, maar ik wilde Radiohead toch één keer live gezien hebben en mijn super-Veerleken had alles perfect geregeld.
Hoe het was? Het was overdonderend. Het was te luid zonder en te dof mét oordopjes. De muziek-freak in mij luistert misschien liever naar één van de vele goeie live-opnames die op het internet te vinden zijn, maar het geluid van de bassen door het lijf was wel bijzonder intens. Het was strakker, juister dan wat ik op YouTube van hun optreden op Coachella gezien had (om van de try-out op Glastonburry nog maar te zwijgen). Wat een groep en wat een falsetto. Het was laat, we zijn na het immer sublieme Paranoïd Android moe maar verzadigd vertrokken om de drukte van de massale uittocht voor te zijn. Maar het was ook te kort; ze hebben zo veel goeie nummers niet gespeeld, “Jigsaw falling into Place” uit “In Rainbows”, “Little by Little” uit “Kings of Limbs” of nog recenter werk zoals “The Daily Mail“, “Staircase” of “Full Stop“. Maar wat ze wel speelden was dus wreed de moeite! Kijk en luister zelf maar:
En zo zit ik 5 dagen na datum nog altijd met mijn hoofd in het Sportpaleis, met oortjes in plaats van oordopjes. Zo is de muziek-freak in mij ook content!
Nope, 1.0.0 wasn’t WP YouTube Lytes final destination, the train has left that station to arrive at version 1.1.0 yesterday. Main new features include:
Just a quick note confirming the release of WP YouTube Lyte 0.8.0. As previously described, the main new feature is support for embedding YouTube playlists in a high-performance and accessible kind of way that is typical of this plugin.
It’s all nice and well to hammer out some code to create a lite YouTube embedded player, but as long as that embed-code can’t simply be copy/pasted from the YouTube-page, it’s all pretty theoretical, no?
Well here you are, a simple bookmarklet that will display the LYTE-code when you’re on a random YouTube video page:
An entirely different type of 3rd party content is Flash video, especially YouTube embeds, but there are a number of indicators that these indeed do impact performance as well:
opening a page with embedded YouTube can take some time when on dialup (or mobile data)
YouTube-heavy pages tend to slow down older computers (flashblock or adblock anyone?)
Facebook doesn’t really embed YouTube by default, but uses a placeholder with a thumbnail instead that is replaced by the embedded YouTube only when clicked
Google Webmaster Tools “Site Performance” seems to sometimes single out pages with YouTube embeds (e.g. stating that there is a DNS-resolution overhead)
There’s good and bad news in those figures. As could be expected the YouTube Flash embed doesn’t impact the rendering of the base page. But 2.6 seconds and 312KB just to display 2 video’s a visitor might not even bother to look at (I bet that the click-rate for embedded YouTube video is somewhere between 2 and 20%), that’s … sub-optimal?
So I threw some JavaScript at my computer to build an alternative to the default YouTube embed, the main goal being to build a Flash-less initial view with only a few lines of html/javascript which at some point people could copy/paste in their site just like they do now. And LYTE (Lite YouTube Embed) came into the world.
(base) download complete: 0.324s for 4KB (which is marginally faster)
start render: 0.363s (again marginally faster)
full page download complete: 0.803s for 35KB (leaner, meaner and faster!)
The code that would have to be copy/pasted (multi-line for clarity): <div class="lyte" id="gnDh6PqWqD8" style="width:480;height:385;"><noscript><a href="http://youtu.be/gnDh6PqWqD8">Watch on YouTube</a></noscript> <script>(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id="lytescr";lyte.src="http://futtta.be/lyte/lyte.js";d.getElementsByTagName('head')[0].appendChild(lyte)}})();</script></div>
The nitty-gritty (do skip if you’re not inclined to get aroused by technical details): this code attaches (a minified version of) lyte.js to the page’s head. The real work is done in that javascript-file: get all divs with class-name “lyte” (with a hack for friggin’ IE inlined), use the videoid which is in the divs’ id to fetch the thumbnail and title from YouTube, display these in a fashion which is very YouTube-like and add an onclick eventhandler to replace the fake with a real player when clicked (and remove the eventhandler to clean things up).
So using LYTE you can embed YouTube in such a way that the amount of data, the total download time and the total rendering time are significantly lower, without loosing any functionality.
And this -to conclude this long post- is what LYTE looks like (soundtrack by Nôze – “Meet me in the toilet”, it’s Friday after all);
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 ;-)
While looking into the possibility to play embedded YouTube clips with html5’s video-element on this blog, I noticed Google added an ‘Enable privacy-enhanced mode‘ flag to the embed-options. This small tweak ensures that visitors who arrive on a page that has YouTube embedded, don’t immediately get tracking cookies stuffed down their throat. Unless they play the video or click through to youtube.com, that is.
Enabling the “enhanced privacy” option just changes the URL in the embed code from youtube.com to youtube-nocookie.com;
The change has no impact whatsoever on the user experience, so I immediately tweaked the code of the Smart YouTube WordPress plugin on my server and I asked the developer to add the option to his plugin as well.
