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

Watch this video on YouTube or on Easy Youtube.

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

  1. Massa P

    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.

    Reply
  2. Dries Bultynck

    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

    Reply
    1. frank Post author

      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) … :-)

      Reply
  3. Christian Kopp

    nice plugin! does the javascript loads on every page or just on youtube video embedded pages.. sorry, worse english.. :)

    have a nice day

    Reply
  4. Christian Kopp

    sounds great, thank you very much for this and your fast answer, frank. have a nice day! :)

    Reply
  5. Massa P

    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.

    Reply
    1. frank Post author

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

      Reply
      1. Massa P

        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.

  6. frank Post author

    a quick heads-up for those interested; version 0.4, which will allow to configure the player-size, is coming soon.

    Reply
  7. Jacob Chapel

    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?

    Reply
    1. frank Post author

      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? ;-)

      Reply
  8. Dave

    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.

    Reply
    1. frank Post author

      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?

      Reply
    1. frank Post author

      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)

      Reply
    1. frank Post author

      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

      Reply
      1. zmin

        thanks a million!

        i really do appreciate your quick answer, i replied on another forum and i got none.

        i’ll try that. cheers! :)

  9. Markus

    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

    Reply
    1. frank Post author

      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!

      Reply
      1. frank Post author

        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.

  10. Markus

    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 :-)

    Reply
    1. frank Post author

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

      Reply
  11. Markus

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

    Reply
    1. frank Post author

      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!

      Reply
  12. Oliver

    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.

    Reply
    1. frank Post author

      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.

      Reply
  13. Oliver

    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.

    Reply
    1. frank Post author

      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.

      Reply
      1. Artega

        Awesome thank you. It’s a shame YT don’t allow you to pass parameters to the fall back player.

  14. AbZahri

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

    Reply
    1. frank Post author

      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?

      Reply
      1. AbZahri

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

    1. frank Post author

      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 :-)

      Reply
  15. Ruben

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

    Reply
    1. frank Post author

      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!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>