lyte

Long overdue: WP YouTube Lyte update

by

It took me way too long (Autoptimize and related stuff is great fun, but it is eating a lot of time), but I just pushed out an update to my first ever plugin; WP YouTube Lyte. From the changelog:

So there you have it; Lite YouTube Embeds 2018 style and an example Lyte embed of a 1930’s style Blue Monday …

Forcing Featured Video Plus to display Lyte YouTubes

by

A couple of days ago a WP YouTube Lyte user asked me if Featured Video Plus and WP YouTube Lyte were compatible. It took me a day to find the answer (I first said “no”), but Featured Video Plus actually has a filter (get_the_post_video_filter) that allows one to override the code used to display the featured video. And after a bit of trial and error this is what I came up with;

add_filter('get_the_post_video_filter','lyte_featured_video');
function lyte_featured_video($in) {
	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	$meta = get_post_meta( $post_id, '_fvp_video', true );
  	if (($meta["provider"]==="youtube") && (function_exists('lyte_parse'))) {
		return lyte_parse($meta["full"]);
	}
 	return $in;
}

Some extra checks ($post_id should not be empty, $meta should not be empty) would make this more reliable, but that’s something you should be able to add, no?

Embedding HTML5 YouTube video with WP YouTube Lyte

by

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;
httpv://www.youtube.com/watch?v=NAbZzdalZh4

Lovin’ the WordPress plugin ecosystem

by

I’m a sucker for simple things and in my book, WordPress (the open source software) is a great example of a simple yet powerful solution for publishing on the web. The last few days I experienced their plugin-ecosystem to be just as simple and powerful.
If you have a plugin to share and you:

  1. register on wordpress.org
  2. fill out a form to submit your plugin for inclusion in their repository
  3. after confirmation upload your code (together with a structured readme-file) via svn

Then boom, automatically;

  • plugin pages (for description, installation, faq, changelog, …) are created and populated with information from the readme and base php-file
  • a zip-file is created containing your stable version
  • your plugin is listed on the “new plugins” page

Before you know it, you’ve got a bunch of real users (wp-youtube-lyte was downloaded 128 times in 2 days) who can rate your plugin and provide you with feedback. And every time you upload a new stable version via svn, a new zip-file is created and your users will get a notification in their wp-admin pages, allowing them to upgrade by simply clicking that upgrade link. Don’t you love it when a plan comes together?
But enough raving already, got to go create that admin-page for my plugin now, as requested by a user. I’m a sucker for real users!

Lite YouTube Embeds in WordPress

by

This 3rd episode in the “High performance YouTube embeds” series brings you yet another way to use LYTE instead of normal YouTube embeds: wp-youtube-lyte. This WordPress-plugin will automatically replace YouTube-links that start with “httpv://” with Lite YouTube Embeds, thereby significantly reducing download size & rendering time.
wp-youtube-lyte plays nice with the great “Smart Youtube” plugin, in which case it will take care of the default embeds (httpv), while Smart Youtube will parse the other types (httpvh, httpvhd, httpvp, …).
You can download the plugin from http://futtta.be/lyte/wp-youtube-lyte.zip.
A quick demo maybe, to finish things off? Owen Pallett performing “Lewis takes action” live in the KCRW studios:
httpv://www.youtube.com/watch?v=TTMlspZglAs

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