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?
fruityoaty
1 Nov 10 at 05:43
Thank you SO MUCH for releasing version 0.6.0 (widget enabled version). AWESOME!!!
Dave
16 Feb 11 at 01:19
I love the plugin! It works great on my site.
I am interested in setting up multiple instaces of the plugin, one to size the videos for posts and one resize them for the sidebar, is this possible? Could I just set one of them to recognize irks with httpsb:// or something instead of just httpv:// ?
Sounds easy enough in theory but those ideas are often tricky to implement. Thanks.
frank
16 Feb 11 at 08:21
hi dave, thanks for the feedback! it feels great to be able to contribute with just a few lines of code
as far as different sizes are concerned; there’s a wp youtube lyte widget available for your sidebar needs, it comes in 3 different sizes which you can choose from, or do you need something different?
divilinux
16 Feb 11 at 14:24
Sorry but no way to define center or left position.
Why?
frank
16 Feb 11 at 15:05
that’s a small bug, i’ll fix it in the upcoming 0.6.5 (but you’ll have to dive into wp-youtube-lyte/lyte/lyte.css though)
zmin
19 Feb 11 at 21:17
could you please tell me which part i should edit to add a custom size for all the videos please?
thanks for a great plugin!
frank
19 Feb 11 at 23:34
hi zmin; just add the custom size to player_sizes.inc.php and put an image with the new width in wp-youtube-lyte/lyte, e.g. controls-newtube-765.png (if html5-player) or controls-765.png
have fun!
frank
zmin
19 Feb 11 at 23:35
thanks a million!
i really do appreciate your quick answer, i replied on another forum and i got none.
i’ll try that. cheers!
Jan Rossi
18 Apr 11 at 04:33
Hi Frank! Just a quick note to tell you that your attention to detail and responsiveness to users is right on. I am using your plug-in with a few blogs I work on and the new lyte embeded link thing is very cool!
Your plug-in is proudly displaying a video by “The Who” on my blog entitled….”Who are you? Brand your Biz”
http://getyoustartedemarketing.com/2011/03/brand-business-emarketing/
Awesome….reliable…thank you! – Jan
Markus
25 Apr 11 at 00:09
Hi Frank,
first of all, i ve to say that your plugin wp youtube lyte is great. i use it on my blog test-portal.net and the page is loading def. faster than before. But with the new version 0.7.1 the videos are not shown like they should. i can only see the youtube-url httpv://… but not the video. I use the WP Version 3.1.1–de_DE. So i tried now to install the old WP Youtube Lyte Version 0.7.0 and it is now working again fine … Do you’ve an idea, how to fix the 0.7.1 problem with my WP-Blog? Here is an example of a an embedded video on my page (if you scroll a little bit down): http://test-portal.net/kinect-spiele-xbox-360-release-liste-aller-kinect-games_101474 I also checked to deactivate WP Super Cache, to install the 0.7.1 again, but it didn’t helped to solve the problem … atm i use 0.7.0 now …
cheers Markus
frank
25 Apr 11 at 09:03
ouch … I made the assumption that wordpress put a paragraph around every lyte-block and adapted my regular expression to include the paragraph in what needs to be replaced. apperantly my assumption was wrong, because wordpress didn’t place your video’s in a paragraph.
sorry for the inconvenience, i’ll release 0.7.2 in the coming days!
Markus
25 Apr 11 at 10:35
hi, thx a lot
that would be great , greetings from berlin , Markus
frank
25 Apr 11 at 10:40
could you check, under “settings” -> “writing” if the option “correct invalidly nested XHTML automatically” is checked? i’m thinking that that option might be responsible for (not) embedding the lyte-player in a paragraph.
frank
25 Apr 11 at 14:30
I’m pushing 0.7.2 to wordpress.org now, the issue should be fixed, sorry for the inconvenience markus!
Markus
25 Apr 11 at 11:09
the option “correct invalidly … ” wasn’t checked. I now tried the version 0.7.1 again when this writing option was checked and after that when the option wasn’t checked, but in both cases wp y-lite 0.7.1. didnt showed the videos, just the url …
on test-portal i now installed the version 0.7.0 again and use another blog for try out some different options with 0.7.1 … if i found s.th out, i’ll let you know
frank
25 Apr 11 at 13:14
another reason why the lyte-player might be wrapped in a paragraph, is the fact whether or not you put your httpv-url’s an a fresh line. do you do
some text httpv://yourube.com/blah httpv://youtube.com/blah2 more textor rather
some text
httpv://yourube.com/blah
httpv://youtube.com/blah2
more text
the first way will probably not generate the paragraphs around the httpv-links, which will break wp youtube lyte, the second manner should indeed create the p’s?
Markus
25 Apr 11 at 20:24
hi, i always put in a fresh line but in the most cases i put a httpv:… tag arround the youtube url … i ll try it without center … perhaps thats the problem
frank
25 Apr 11 at 20:29
i guess “center” indeed will prevent the paragraph from being added. anyway, 0.7.2 should make all of our guessing superfluous, let me know if there’s any problem after the update!
Markus
25 Apr 11 at 21:32
Hi Frank, thx a lot !!!
everything is working fine now … also with the tag
greetings from berlin
Markus
Oliver
13 Aug 11 at 10:10
The new version 0.7.3 doesn’t run so, as I posted – as usual – a youtube link to be embedded I realised there’s space in the format of the video but not the video itself. Checked other videos I embedded and nothing was going on there. Need a solution.
frank
13 Aug 11 at 12:36
cfr. my mail, based on your html code, there’s something wrong with the code in wp-youtube-lyte.php on line 69; the addeventlistener is broken as the URL of your blog is in there. check & correct that file or uninstall & re-install wp-youtube-lyte and all should be well.
Oliver
13 Aug 11 at 12:59
I understand. I do not need to reinstall- In fact, it’s not your fault at all. I used “Free CDN” for testing purposes but I didn’t recognized that anything went faster since I’ve installed the CDN-plugin. Deactivated and deleted it now and anything else is fine. Even your plugin runs as it should. Thanks.
frank
13 Aug 11 at 13:39
glad you’ve got it solved. I use wp super cache’s cdn functionality (w3 total cache has that as well) to offload static resources to an aliiased domain, you can even do that with one simple change in wp-config.php, works pretty well.
Oliver
13 Aug 11 at 13:52
Thanks a lot for the hints.
Artega
29 Sep 11 at 03:55
Is there anyway to pass opague as the wmode to the Flash player?
This is the issue being experienced:
http://stackoverflow.com/questions/326196/ff3-windows-css-z-index-problem-with-youtube-player
frank
29 Sep 11 at 05:28
if you’re using the “old-style Youtube embeds with flash”, sure: open plugins/wp-youtube-lyte/lyte/lyte.js, search
wmode=\"transparent\"and replace it withwmode=\"opaque\"if you’re using the HTML5-video option and Youtube falls back to Flash, all embed code is being sent by Youtube, so it can’t be changed as far as I know.
Artega
29 Sep 11 at 06:18
Awesome thank you. It’s a shame YT don’t allow you to pass parameters to the fall back player.
AbZahri
18 Oct 11 at 17:36
This is great plugin for WP I have been using for a month now.. but today I updated to latest release and it broke the plugin with tube at front page with multiple videos.. please check it out.. http://abzahri.com/ And do you have the older version.. I would like to fall back if possible.
frank
18 Oct 11 at 17:52
hi abzahri; a pity the new version doesn’t work for you, but I can’t really see what’s wrong, everything seems to work? what doesn’t work exactly for you?
AbZahri
18 Oct 11 at 19:14
Frank.. I finally got it running.. After updating.. apparently the script didn’t download the new version object from the youtube server.. After clearing the cache on the server.. I got it running..
Thanks..
frank
18 Oct 11 at 19:53
glad it works, hope you enjoy the new playlist feature!
Ruben
11 Jan 12 at 00:43
Hi,
i’ve uploaded the plugin it doesn’t parse httpv address on main page. If i click on the article and i watch it in single page it works ok. What i’ve to do?
Check it out!
http://www.tuttingegneri.com
frank
11 Jan 12 at 07:13
Morning Ruben; this is because WP YouTube Lyte is only active for “content” (i.e. the full post/page), not for “excerpts”. Shouldn’t be to hard to add it though, if you feel adventurous you could;
Let me know how that works out, this might land in 1.0.0 if it does
frank
4 Feb 12 at 16:55
afternoon ruben; the new version of wp youtube lyte (1.0.0!) now supports parsing manual excerpts. hope you like it!
Ruben
25 Jan 12 at 18:10
I edited the core file of the plugin with that:
add_filter(‘the_excerpt’,'lyte_parse’,4) but nothin has changed. On excerpts it doesn’t parse.
frank
25 Jan 12 at 18:27
I’ve started working on 1.0.0, I’ll look into parsing the excerpt and might include a fix for that if possible.
Ruben
25 Jan 12 at 18:43
Ok. Ty!
frank
29 Jan 12 at 13:06
OK Ruben; the wordpress automatic excerpt-function strips out too much for wp-youtube-lyte to function.
you can however add the httpv-URL (and some text) in excerpt-field beneath your text in post/page edit (if it’s not there, you can make it visible in “screen options”).
if you do that, and have “add_filter(‘the_excerpt’, ‘lyte_parse’, 4);” in wp-youtube-lyte.php (right under the same line with (“the_content”), then you’ll have your wp-youtube-lyte vid in your excerpt all right.
this will, one way or another, indeed be in 1.0.0 (but the manual excerpt will be needed).
hope this helps!