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:

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;

They Might be Giants-Birdhouse In Your Soul

54 thoughts on “Embedding HTML5 YouTube video with WP YouTube Lyte”

  1. 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.

  2. 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

    • 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) … πŸ™‚

  3. nice plugin! does the javascript loads on every page or just on youtube video embedded pages.. sorry, worse english.. πŸ™‚
    have a nice day

  4. Unfortunately, it doesn’t play well with a fantastic plugin called 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.

    • 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).

      • 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. πŸ™‚

  5. 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?

    • 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? πŸ˜‰

  6. 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.

    • 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?

    • 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!

  7. 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

    • 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!

        • 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.

  8. 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 πŸ™‚

    • 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 text
      or rather

      some text
      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?

  9. 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 πŸ˜‰

    • 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!

  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.

    • 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.

  11. 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.

    • 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 with wmode=\"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.

  12. 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. πŸ™

    • 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;

      1. open wp-content/plugins/wp-youtube-lyte/wp-youtube-lyte.php
      2. go to the line that reads “add_filter(‘the_content’, ‘lyte_parse’, 4);”
      3. add a new line underneath: “add_filter(‘the_excerpt’, ‘lyte_parse’, 4);” (or get_the_excerpt, could both work)
      4. save & close

      Let me know how that works out, this might land in 1.0.0 if it does πŸ™‚

  13. 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. πŸ˜€

    • 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!


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.