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;
Massa P
17 Jun 10 at 06:32
I LOVE this plugin. Thanks for sharing.
I updated from 0.2.2 (which was working fine on my blog) to the latest 0.3.2. After updating, I saw a bunch of errors. When I tried to login to WordPress admin, I could not and kept getting this error: Warning: Cannot modify header information – headers already sent by (output started at /home/fruity/public_html/wp-content/plugins/wp-youtube-lyte/options.php:51) in /home/fruity/public_html/wp-includes/pluggable.php on line 868
So I reverted back to the previous version… and everything is fine again.
frank
17 Jun 10 at 07:25
that’s weird. what version of wordpress are you running?
frank
17 Jun 10 at 09:08
ok, according to a wordpress troubleshooting FAQ page it was a stupid linebreak at the end of options.php. I removed the linebreak and pushed 0.3.3 out, should arrive real soon in an wp-admin screen near you. Hope this solves this problem!
Massa P
17 Jun 10 at 16:08
Thanks for the reply and fix. Oh, and just to answer your question, I’m using WordPress 2.9.2.
Dries Bultynck
18 Jun 10 at 19:46
Excellent! Now i can remove the link to your script on your domain
Did you test the difference between choosing for a plugin or just adding the script async? Just out of curiousity. Tnx for sharing this. On my to-do list
frank
18 Jun 10 at 21:36
the plugin just ‘translates’ the httpv youtube link into the html-code that does the async script inclusion, so there probably is a very (but really very very) small performance impact (unless you’re using wp-super-cache, which you should) …
Christian Kopp
23 Jun 10 at 10:29
nice plugin! does the javascript loads on every page or just on youtube video embedded pages.. sorry, worse english..
have a nice day
frank
23 Jun 10 at 10:34
hi christian; the javascript only loads if there’s a youtube to be embedded
Christian Kopp
23 Jun 10 at 11:14
sounds great, thank you very much for this and your fast answer, frank. have a nice day!
Massa P
10 Jul 10 at 03:51
Unfortunately, it doesn’t play well with a fantastic plugin called n3rdskwat-mp3player
wordpress.org/extend/plugins/n3rdskwat-mp3player/
… which seems to be currently the only WordPress audio player plugin out there that allows a visitor to browse a site and play music without the music stopping (when user goes to another part of the site). It’s rather awesome.
When WP YouTube Lyte and n3rdskwat are both activated, the YouTube images disappear. I’ve contacted the author of n3rdskwat, but I’m not sure if he’s going to address the issue…
I was hoping you could look into the issue… please? But if not, I understand… compatibility with all plugins can’t be guaranteed.
frank
10 Jul 10 at 04:13
no problem, i’ll look into it
frank
10 Jul 10 at 16:14
hi massa (that’s your first name I hope?);
looked into the issue you described, but i probably won’t be able to solve it.
the problem is that n3rdskwat-mp3player is very intrusive;
* it redirects all request from hostname/path to hostname/#/path (which seemed to brake navigation-stuff)
* it creates an entirely new DOM which embeds the normal wordpress-page in
* it relocates/ modifies/ removes other javascript-functions (the lyte-script is indeed relocated)
apparently others are having similar problems: see this and this question on wordpress.org
given these facts i’m afraid I would advise against using n3rdskwat-mp3player (even without taking wp-youtube-lyte into account).
Massa P
11 Jul 10 at 02:50
Hi! Yes, Massa is my first name.
Thank you very much for looking into the issue and giving an explanation.
I appreciate it. Yeah, I didn’t expect compatibility or a quick resolution. n3rdskwat is indeed intrusive (it broke some other plugins I’m using.)
But thanks for looking into it.
I will probably have to drop n3rdskwat… but I cannot drop WP YouTube Lyte… it’s just too awesome. 
Thanks.
frank
14 Jul 10 at 22:47
a quick heads-up for those interested; version 0.4, which will allow to configure the player-size, is coming soon.
Jacob Chapel
11 Aug 10 at 23:19
I tried adding this to my forum, but there is a problem with someone quotes someones video. It doesn’t load the video in the new users post, but loads it right under the first instance of the video, going above all other elements of the page. Any way to fix it?
frank
12 Aug 10 at 08:44
hi jacob, can you provide me with an example of where this is happening? and i’m also curious; how did you manage to install a wordpress-plugin in a vbulletin-forum?