WP YouTube Lyte and mobile, I must be honest, it is not an easy marriage. Light YouTube Embeds focuses on optimizing performance by displaying a dummy player which takes less then a tenth of what a normal YouTube embed requires. Only when clicking on that dummy player, the real YouTube embed is loaded and auto-played. Simple and efficient, no?
Mobile is an whole other ballgame. For starters, there’s no autoplay on YouTube mobile embeds. At all, because Apple prohibits autoplay in HTML5 video and browsers on Android seem to agree. So the trick with the dummy player does not work (unless you would accept users having to click twice) and as a consequence, WP YouTube Lyte on mobile loads the (mobile) embed straight away.
But that’s not all; for audio-only to work, auto-hide has to be disabled (as the bottom controls are the only player elements that remain visible) but that despite setting autohide=0&controls=1, controls still remain hidden in mobile YouTube embeds, rendering the audio-only player UI useless, as a consequence of which WP YouTube Lyte has to show the full video on mobile. And YouTube playlists on mobile are known to be broken as well, one can only hope this is being worked on by YouTube.
And then one week ago a user posted about yet another mobile-specific problem on the wordpress.org WP YouTube Lyte supportforum; when rotating your smartphone or tablet, the size of the embedded video did not adjust. The reason in a nutshell; while LYTE (the dummy player) is responsive, the YouTube iframe-embed that is loaded on mobile is not. To solve this, I added an orientationchange event handler (WebKit-only to my disappointment, although I do have an alternative approach that I might introduce at a later stage) in version 1.3.3 which I released earlier today, re-requesting the embed when the orientation changes.
The conclusion; WP YouTube Lyte works on mobile, but it is not the most elegant of solutions at this particular stage. So in the spirit of full disclosure; if desktop & performance are key, then WP YouTube Lyte remains one of the best solutions for YouTube on WordPress out there, but if your main target audience is mobile web, you should at least be aware of these limitations (some of which also exist outside of WP YouTube Lyte).
wp-youtube-lyte
Do not donate to me!
Some people ask me if they can donate for my software. My answer invariably is they can’t, because I don’t want money. Instead I would like them to make a small donation to a good cause!
Why? Well, I’m a very lucky guy, living in the richest region of one of the richest countries of the world and having a full-time job that allows me and my family to live a comfortable life. Software is “just a hobby” which I hope is a small contribution to make the web (and by extension the world) a slightly better place.
So given that context and given the fact that there are many ways in which the world could be made a better place, I would like to ask you to donate any amount of money you think my little projects are worth to a good cause. Just pick one, click and donate!
- Donate via GiveDirectly which helps people living in extreme poverty by making unconditional cash transfers to them via mobile phone.
- Lend via Kiva, or send me a Kiva-voucher and I will lend with that. Kiva allows people to lend money via the Internet to low-income / underserved entrepreneurs and students in 70 countries.
- Support La Quadrature du Net, which is one of Europe’s leading organizations promoting net neutrality, a positive reform of copyright and the protection of privacy (these guys were instrumental in defeating ACTA).
- Mary’s Meals provides life-changing meals to some of the world’s poorest children every school day.
- The Mozilla Foundation is responsible for Firefox and for the Mozilla Developer Network documentation, keeping the web open en other browsers honsest. Donate to them!
And there are many, many more great causes both locally and internationally that can use our help!
WP YouTube Lyte mobile audio-only degradation
stevygee1987, one of those great WP YouTube Lyte users, discovered that somewhere along the way audio-only embeds stopped working on mobile (iOS & Android).
The root-cause of the problem is that for mobile browsers YouTube does not show the bottom controls any more, even if specifically requested to do so via the iFrame API.
I’m waiting on some bright soul to provide me with a good solution (on stackoverflow, so your upvote might help), but as a temporary workaround audio-only on mobile will be rendered as a normal YouTube video (which YouTube prefers, really, you should not do audio-only if you want to stay within the Terms of Service).
Just for testing purposes, “Alone again or” by Love in a small audio-only embed (unless you’re on mobile, that is);
Power users rejoice; WP YouTube Lyte has an API
Power users of WP YouTube Lyte might be particularly interested in the version that is being pushed out as we speak. 1.3.0 comes with an API, allowing you to substantially change the way the plugin works.
You have the following filters to play around with;
- lyte_settings; filter to change values in the settingsArray without changing the actual setting
- lyte_content_preparse; filter to change the_content before the httpv-links are being parsed
- lyte_match_preparse_fragment; filter to change an individual httpv-link before it is parsed
- lyte_match_postparse_template; filter to change the parsed code before it is merged back in the_content
- lyte_content_postparse; filter to parse the_content before it is being handed over to the next plugin
- lyte_css; filter to change WP YouTube Lyte’s CSS
- lyte_actionsfilters; action to add extra actions or filters, e.g. to make sure widget_text is parsed by lyte_parse as well
The plugin now comes with “lyte_helper.php_example” which is an sample plugin file that, when copied to “/wp-content/plugins/lyte_helper.php” can be activated as a separate plugin and which contains examples of how the API can be used.
For the less tech-savvy users, these are some of the other changes in 1.3.0 (from the changelog):
- Support for higher quality thumbnails by adding #hqThumb=1 to httpv-link
- You can disable microdata on a per-video level by adding #noMicrodata=1 to the httpv-link when microdata is enabled.
- Checkbox on admin-page to flush WP YouTube Lyte cache (which holds title, description, … from YouTube)
As always; feedback, bug reports, feature requests, criticism or code suggestions are more then welcome in the comments or via the contact form.
But whatever you do, make sure to have fun while doing it! This embedded YouTube audio track (a 2h BBC essential mix by Flying Lotus from back in 2008) might help, if you’re into that type of music that is;
My YouTube is Lyter then YourTube!
The latest WP YouTube Lyte version came with support for responsive themes and added microdata for better search-engine discovery of your embedded video’s. But there were also some important improvements from a performance point of view;
- The title of the video (and the description, length, …) is now requested and cached server-side (the data is stored in the WordPress database, as post_meta, to be precise) and included in the HTML instead of getting that data client-side using JavaScript
- The LYTE player chrome (the play button -with 2 states- and the bottom control) is now fetched with one request for a CSS sprite (lytesprite.png) instead of 2 separate images
- And finally a lot of the player properties are now defined in CSS instead of being dynamically set in JavaScript, resulting a a significantly smaller JavaScript-file
But what are words worth, you only want to know if WP YouTube Lyte still out-performs normal YouTube embeds, right? Well, there’s nothing like a nice old-fashioned comparative webpagetest;org test to see where we stand!
| document complete | fully loaded | video only | ||||||
| time (s) | requests | size (KB) | time (s) | requests | size (KB) | requests | size (KB) | |
| Standard YouTube (page | result) | 1.757 | 10 | 167 | 4.718 | 13 | 483 | 8 | 429.8 |
| WP YouTube Lyte (page | result) | 1.021 | 6 | 79 | 1.353 | 8 | 100 | 3 | 22.9 |
So yeah, WP YouTube Lyte is more efficient then normal YouTube embeds, by a very large margin! Now go and preach to the unfaithful, because after all, doesn’t the world deserve Lyter YouTube embeds?
How to have normal YouTube-links handled by WP YouTube Lyte
Although by default WP YouTube Lyte only works with httpv or httpa links and hence does not act on normal YouTube links (which are instead auto-handled by oEmbed in WordPress core), you can easily change this behavior by adding the following code-snippet to your theme’s function.php or to a separate “helper”-plugin:
/** force wp youtube lyte on http://www.youtube.com url's as well */
add_filter('the_content', 'force_lyte_parse', 1);
function force_lyte_parse($content) {
$content=str_replace('http://www.youtube.com/watch?v=','httpv://www.youtube.com/watch?v=',$content);
return $content;
}
Now that wasn’t too hard, now was it?
The best WP YouTube Lyte to date!
Today WP YouTube Lyte 1.2.0 got finally pushed out the gates! This new version is beyond any doubt the best version to date, with the following new features:
- LYTE embeds are now fully responsive
- automatic inclusion of scheme.org microdata (VideoObject) (also known as “rich snippets”)
- even better performance (less requests; was 5, now 3)
- updated to the current YouTube look & feel, see this YouTube video about microdata:
Although I did go through a small beta-cycle, with feedback from 5 users (thanks guys), I am pretty sure there still are bugs that will rear their ugly head in the following days (some strings haven’t been translated yet, for example). Do contact me, add a comment here or create a post on the wordpress.org forum in case you encounter unexpected behavior!
WP YouTube Lyte 1.2.0: beta testers needed
Yesterday I pushed a beta version of the long overdue 1.2.0 to the SVN trunk at wordpress.org. This is the version at least some of you have been waiting for, as it includes the following new features:
- LYTE embeds are now fully responsive
- automatic inclusion of microdata
- less in JavaScript, more in CSS
- better performance: even less requests (from 5 to 3), with one CSS sprite containing the player UI.
- updated to current YouTube look & feel, which results in something like this (Ultraïsta‘s Smalltalk in a Four Tet remix):
But don’t go running off to your WordPress admin screens just yet, there’s no update notification to be seen there. This is very much still work in progress: the microdata-stuff isn’t complete yet, I’ll probably load the CSS differently, I’m still not sure what widget sizes will be supported, the translations have to be updated, there’s some PHP notices to take care of … And most importantly: as this isn’t just another small, incremental release, we need lots of testing.
So I’m looking for people who want to join in on the fun and test the in-development version on their blogs. To do so, download the zip-file from http://downloads.wordpress.org/plugin/wp-youtube-lyte.zip and (optionally) drop me a line so I know who I have to ping when I push an update out. I’m looking forward to receiving feedback from you guys & girls!
Looking in the mirror: 2012 numbers, 2013 goals
As I did a year ago for 2011, here I am looking in the mirror at my 2012 numbers and 2013 goals:
- This blog:
- 130 blogposts (78 “real” posts and 52 aggregated lifestream-events)
- 109285 pageviews, the most popular individual article being 5 tips to tackle the problem with iframes (8622 views). Off all new 2012 blogposts, Fix Samsung ICS Exchange connection errors was read most with 5727 views.
- 294 comments (including trackbacks and my own replies)
- Main goal for 2013: carry on, I guess? Maybe some more personal posts in Dutch. I’ve always loved to write in my native language, but it can be pretty time-consuming as I tend to rewrite a text multiple times before I’m OK with wording and flow (which I’m not as sensitive to in my non-native English).
- WP YouTube Lyte, my WordPress plugin to do “lazy load YouTube embedding”, is doing really well:
- 9 minor and 2 major releases including the big 1.0.0 milestone
- 66286 downloads (passing the 100.000 downloads mark in July)
- Main goal for 2013 and long overdue; responsiveness but also even better performance (less reliance on JavaScript to do heavy lifting, using less http-requests).
- Moreover, I was honored to see Yoast’s Video SEO plugin has support for WP YouTube Lyte and equally proud to be able to decline a commercial proposal to have my plugin add a link next to each and every LYTE player.
- WP DoNotTrack 2012 proved a fruitful year for my 3rd party tracking filtering plugin:
- 9 minor and 3 major releases, including features such as “SuperClean mode” and better support for “cookie law”-compliance
- 5501 downloads
- Goals for 2013: having CSP in would be great, other suggestions are welcome.
2012 was also the year that I got to know Drupal & Acquia a lot better, the year my lovely daughter learned how to read, the year I grew scared of Europe’s economical & Belgium’s political future, the year I saw Radiohead live and the year I finally learned how to fly.
Are you wishing WP YouTube Lyte a responsive new year?
I’m spending some of the last hours of 2012 as a preparation for one of my 2013 resolutions; a new version of WP YouTube Lyte that will be fully responsive. I just finished a “template” (i.e. plain static HTML + CSS, not integrated in the plugin yet) which I’m pretty happy with.
It features:
- A responsive player which in this test-case means a width of 820, shrinking when needed. The default width will remain an option.
- Closer to current YouTube look & feel with a black play button that becomes red on hover
- All player chrome loaded from just one image sprite (2 images in current, non-responsive version)
- Embedded microformat data for better search engine discovery (will probably be configurable, “off” by default)
- Works on all browsers (although e.g. positioning the play-button without CSS3 calc in e.g. IE8 and below is less precise)
You can check out the template on http://dl.dropbox.com/u/9207036/new_lyte_test.html. Feel free to give feedback on this early test-implementation.