youtube

Lite YouTube embeds free for all!

by

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:

Want this? Then just do this:

  1. drag this LYTE bookmarklet to your bookmarks toolbar
  2. go to a random youtube-video page
  3. click on the bookmark(let)
  4. copy/paste the LYTE code on top of the page into your html
  5. enjoy Lite YouTube Embeds (i.e. 17KB instead of 150KB with a normal embed) on your site!

Happy embedding!

High performance YouTube embeds

by

It’s all about speed! I mean, you want your visitors to stick around, enjoying your content instead of waiting for stuff to download, no? And I bet you would love Google to consider your site quick, now that speed has been confirmed to have an impact on search ranking?
“High Performance web sites”-guru Steve Souders is doing incredible work studying the impact of 3rd party content -and especially javascript-based services such as analytics and bannering- on the performance of a web site.
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)

Indeed, when testing this simple page with some text and 2 embedded YouTube clips on webpagetest.org, these were the main results (full results including nice graphs here):

  • (base) download complete: 0.356s for 2KB
  • start render: 0.426s
  • full page download complete: 3.005s for 315KB

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.
The main results when testing this LYTE-test-page on webpagetest.org (full results here):

  • (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);
httpv://www.youtube.com/watch?v=YUzoE-Bzy0w

Embedding YouTube HTML5-video with newTube

by

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 😉

Enhanced privacy for embedded YouTube

by

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;

<object width="560" height="340"><param name="movie" value="http://www.youtube-nocookie.com/v/FuGJfVAgiTM&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/FuGJfVAgiTM&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

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.
Yet another small step in the fight against Google’s omniscience!

Liefde voor vers geperste Pomplamoose

by

Daar zit ge, op een maandagochtend op het werk en tussen Powerpoint en presentatie zijt ge wat aan het kloten aan een blogpost waarin Queen een rolletje speelt en ge vraagt U af of iemand op YouTube Brian May op ukelele doet, want een ukelele is altijd leuk (vraag maar aan spekvriend). Zo komt ge dan op een leuke cover van “Best friend” door YouTube-wonder Julia Nunes, ge klikt wat rond langs haar naïef bevallige covers en ziet dat haar nieuw album geproducet is door Pomplamoose. Tiens, grappige naam, klik-klik-klik dus en ge luistert naar wat die Californische citrusvruchten te bieden hebben en -om een lang verhaal kort te maken- ge geraakt daar niet meer weg.
Pomplamoose …

httpv://www.youtube.com/watch?v=xycnv87N_BU
Man man man, ik moet gewoon iets van Pomplamoose in m’n presentatie verwerken!

Gmail- en YouTube-groeipijnen en The Sound of Music (on acid)

by

Een paar dagen geleden problemen met GMail en nu blijkt YouTube quasi onbereikbaar (“Http/1.1 Service Unavailable”), wat is dat daar misschiens gasten?
Soit, ik was eigenlijk op zoek naar John Coltrane‘s versie van “My Favourite Things” (The Sound of Music on acid, ofzo), gewoon om mezelf een plezier te doen op deze druilerige dinsdagmiddag in het donkere Brussel. Een mens mag zich al eens goed laten gaan, toch?
httpv://www.youtube.com/watch?v=NllPZ5_Tw40
Enne, “Twitterless Twaddle”, dat wilt dus niet zeggen dat ik niet twaddle, enkel dat ik dat niet via Twitter doe. Dat blijkt toch, pippo’s?

how google stole my video

by

zsazu, zo wilde ik het geesteskind noemen waarmee ik de wereld ging veroveren. de toekomst van nternetvideo, mee op de golf van web 2.0: cross-platform flash-gebaseerde video publishing als een service! tot google video met elke nieuwe release meer van mijn ideeen bleek te valideren en daarmee zsazu naar het mindmap-kerkhof verwees, waar menig concept om middernacht jammerend met de kettingen rammelt .. gooogle! gooooooooogle!!
met zsazu (of zou het toch zazu geworden zijn?) zou ik video-publishers (AV-media en gelieerde bedrijven in eerste instantie, portaal- en webbouwers in tweede instantie) de mogelijkheid bieden om op eenvoudige wijze cross-platform video-bestanden te publiceren.
ik brainstormde elke avond met mezelf (mindmapping for dummies), mailde met macromedia en kleine would-be concurrenten, deed testen met software-componenten en werkte zelfs al aan een prototype.
het idee was krachtig én eenvoudig: de originele file laten uploaden via een web-interface, op de server zou die file verwerkt en geconverteerd worden naar een flv-bestand en de eigenaar zou dan per mail een klein blokje html of javascript ontvangen waarmee de flash video in de eigen site gepublished kon worden. dat stukje javascript zou een geavanceerde flash applicatie oproepen die de eigenlijke video-file (flv) zou ophalen (met een security-laag errond waardoor een gebruiker nooit aan de eigenlijke flv-file zou kunnen) en (eventueel na betaling, want dat moest ook mogelijk zijn) afspelen. daar zou tenslotte nog een laag logging en reporting-functies rond geschreven worden om de eigenaar alle nodige inzicht in consumptie van zijn of haar online video-materiaal te geven.
dat alles zou met een paar bestaande en bewezen componenten (beginnen met 1 linux webserver met apache webserver, php voor administratie en flv-wrapper-functies, mysql database voor sessiebeheer en 1 linux server voor videoconversie met ffmpeg, aangestuurd door shellscripts of in extremis perl, python of php-cli-scripts) en een keigoeie flash applicatie op betrekkelijk korte tijd (ik dacht aan pakweg 3 maand) in test op te zetten zijn.
en dan, met een goeie demo als breekijzer, dan was het een kwestie van een paar vissen aan de haak te slaan die met mij in zee wilden (paar investeerders, paar klanten die vroeg aan boord zouden springen) en we zouden op weg geweest zijn om een leuk web 2.0-bedrijfje uit te bouwen. tot pakweg vorige week.
want vorige week las ik dat google begin q4 van 2005 voor hun video-project -dat al een tijdje ontwikkeld wordt- beslist had om de switch te maken van een eigen ontwikkelde client-applicatie (een stand-alone google videoplayer) naar publishing in flash video. en naarmate de google video hype groter werd (naar aanleiding van de aankondiging van het feit dat google ook video van oa broadcasters ging verkopen) en er dagelijks functionaliteit bij gereleaset werd, bleek dat zsuza ook bestond in de knappe koppen van de verlichte zoekdespoten. google was me voor en deed het beter dan ik het ooit gedaan zou kunnen hebben. een pracht van een applicatie, op alle vlakken!
en zsazu, .. die naam hou ik in mijn achterhoofd voor het volgende lumineuze idee. want ooit moet ik alle nitwits ter wereld toch voor kunnen zijn. toch? 😉