Lite YouTube Embeds in WordPress

This 3rd episode in the “High performance YouTube embeds” series brings you yet another way to use LYTE instead of normal YouTube embeds: wp-youtube-lyte. This WordPress-plugin will automatically replace YouTube-links that start with “httpv://” with Lite YouTube Embeds, thereby significantly reducing download size & rendering time.

wp-youtube-lyte plays nice with the great “Smart Youtube” plugin, in which case it will take care of the default embeds (httpv), while Smart Youtube will parse the other types (httpvh, httpvhd, httpvp, …).

You can download the plugin from http://futtta.be/lyte/wp-youtube-lyte.zip.

A quick demo maybe, to finish things off? Owen Pallett performing “Lewis takes action” live in the KCRW studios:

Owen Pallett – Lewis Takes Action

Watch this video on YouTube.

42 thoughts on “Lite YouTube Embeds in WordPress

  1. Ricky Buchanan

    This looks like something that will be really useful for us not-so-fluent-in-JS/PHP types to take advantage of the LYTE method!

    Some questions – please excuse my lack of knowledge here:

    Does this still load the script from your own server, or does it use a version downloaded with the plugin? I think from the PHP that it downloads it from the plugin but I’m not 100% sure.
    It seems from the plugin that the width and height of the YouTube video is hardcoded into the plugin. Could this be made a plugin option, so we can choose from the usual YouTube options?
    Is it possible to have sensible ALT attributes on the image tags? This would probably mean alt=”” on the chrome parts, and alt=”Play video $name on YouTube” on the main video image.
    Also, is it possible to put the video name in the noscript section so it says “play $name on YouTube”? I’m guessing not, but it’s worth asking :)
    Could the plugin be modified to provide a link under the regular player to play the video in an accessible YouTube player such as http://icant.co.uk/easy-youtube/? Just a simple link in a div for styling purposes labelled “Play video $name via Accessible YouTube.” or similar. I realise this wouldn’t be a common request but I run several blogs related to disability and/or accessibility and having an option to have these links auto-inserted would be heavenly for me!

    Thanks for what looks like a fantastically useful plugin. I really appreciate people taking the time to share their code so people like me can use it and learn from it.

    Cheers,
    Ricky

    Reply
    1. frank Post author

      thanks for the feedback & questions ricky! here’s some answers:

      the plugin contains all dependencies, script and images included.
      i don’t have an options page yet, but i might include it in version 0.2
      adding alt tags is a great idea, will do for 0.1.2
      putting the name in the noscript-tags would make things more complicated (and slower). i might one day decide to do so, but no promises :)
      regarding the links; i could i could move the content which is between the noscript-tags now to a div and adding the easy-youtube link, i’ll include it for 0.1.2 as well

      Reply
      1. Ricky Buchanan

        Thanks so much Frank! I’ll watch out for the upgrades. If I ever get inspired (and a touch more educated) would it be OK to send you diff files for any of these I implement myself?

        And thanks again for sharing the plugin :)

      2. frank Post author

        well, 0.1.2 as used in the post above has some of the accessibility features you asked for, feel free to provide me with feedback! :)

  2. website speed test

    I wanted to post these excellent tricks I came across – I hope that’s alright.

    Did you know that you can increase the speed of WordPress and other platforms by up to 4 times – for FREE and very easily!

    You can simply add 2 lines of code to the header file to enable ZLIB compression – that will make your blog (particularly WordPress) up to 4 times faster instantly!

    You can also GZip your css files, etc which will save even more bandwidth and make the site load even faster.

    You can (of course) also use free tools to compress or crunch images too, which makes sites load quicker still.

    You can learn exactly how to do this by clicking my name (I’ve linked to it – hope that’s okay).

    It is amazing how much difference this will make to your blogs speed.

    One little problem to note is that right now the WordPress “all in one seo” plugin will stop adding the home page title you specify when you use compression and will instead show the blog title – but that’s a small price and I’m sure it will eventually work with it.

    I hope you find this useful.

    Reply
  3. fruityoaty

    I continue to love this plugin (and Google seems to love it too as it no longer complains that my blog is too slow). Anyway, question… Do you have any plans on widget functionality (specifically, a resizable sidebar player that doesn’t affect the size/functionality of player in posts)? Like the previous commenter above me, I too would love a ‘resize’ function (currently, I keep hacking the plugin, but this gets tedious after every update…)

    Anyway, thanks for this plugin. One of the most useful WordPress plugins out there I’ve across (and I use WAY too many, hehe). :)

    Reply
  4. frank Post author

    a quick heads-up for those interested; version 0.4, which will allow to configure the player-size, is coming real soon now (as in tomorrow if all goes well).

    Reply
  5. Steve Viertell

    Very nice plugin, I’m using 0.4 and it sure speeds up page loading. One question. The little button on the controls that gives you full screen isn’t there, am I missing something? It’s there on your sample videos.

    Thanks Steve

    Reply
    1. frank Post author

      that is because the “full screen”-button is not available in the normal youtube embeds, that option is only available if you use wp-youtube-lyte’s html5-version.

      Reply
    1. frank Post author

      hi steve; fullscreen for non-html5 video is in the version 0.4.1 which I just pushed to the wordpress.org plugin repository, it should arrive as an update in you wp-admin real soon, hope you like it!

      Reply
  6. Ferran

    Hi Frank!

    First of all, thanks for this awesome plugin!

    With no IT studies I am trying to build up a video centric website of recipes. I want to use your plugin there with the embed code but as you can see in the link http://www.watchrecipe.com/tortilla-soup/ I am having trouble with it:
    1. the dropdown menu on top of the video goes in front of the image (alright!) but later when the video is played it goes after the video (wrong)
    2. i should change something on the css so as to make the div next to it to be next to the video player, right? right now it goes down the youtube video
    3. the youtube bar of the image doesnt appear

    I guess that all this is something to do with the div=”lyte”… this is what i included in the post.

    Notice that I am using a premium theme called wave and it calls the video out of the regular blog post.

    If you help me with this, also answer me this question: how could I buy you a beer!?

    Reply
    1. frank Post author

      hi ferran. glad you like wp-youtube-lyte. before looking into the css-stuff, let’s get the plugin functioning correctly first.

      it appears as though you’ve made modifications in the plugin-code

      you seem to have hardcoded the URL of my own wp-youtube-lyte installation as the bU parameter. i would advise against that; if for one reason or the other (e.g. when i’m testing a newer version or when my blog is down) the js or image isn’t available, your site is broken
      you seem to have changed player_sizes.inc.php, introducing a width of 605. if you add a new width, you’ll have to put a “controls” image into place with in this case filename controls-newtube-605.png

      once we have the plugin up and running correctly, we can move on to the dropdown menu & the div next to the video-player.

      Reply
  7. Ferran

    Hi Frank!

    What I did is getting this code from another comment and change the 10 characters of youtube for my video and where I thought the sizes go for 605 to 390. This is the result:

    ———–

    /**/
    _________

    Actually the size I would like is 610 for 390.

    The only thing I have clear I have to do is to get one of the imges of the plugin and adapt it to the width 610.

    Which value should the bU parameter have? The same but related to my plugin, right?

    Despite I never studied web designing I feel alright in the php files so just tell me and I will try to fix it!

    1000s of thanks!

    F.

    Reply
    1. frank Post author

      ok, but why do you copy/paste the html? if those recipes are normal wordpress-posts, then you just have to put the youtube-link in there with “httpv” instead of “http”, e.g.

      httpv://www.youtube.com/watch?v=zYAlcD9xsSs

      the plugin will replace that link with all the (correct) html-code, in which case the problem with the control-png will be solved (albeit with an incorrect size, but that’s easy enough to fix at that stage)

      Reply
    1. frank Post author

      ah, now I understand, you’re using a specific post type. although it is possible to trigger wp-youtube-lyte code for a custom field with a httpv-youtube-url, we’ll stick with the copy/pasting of html-code for now, but:

      1. change
      var bU='http://static-blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/'
      into
      var bU='http://www.watchrecipe.com/wp-content/plugins/wp-youtube-lyte/lyte/'

      2. add an image with width 605 and with name “control-newtube-605.png” in wp-content/plugins/wp-youtube-lyte/lyte.
      3. make sure to include the closing div in the code you paste

      that should solve most of your problems (except for the menu over the active youtube-video, which browser do you see this in?)

      Reply
  8. Ferran

    Great!

    Hopefully tomorrow lunchtime I can update you on this with good news!

    Afterwards lets tackle the css and the dropdown stuff and finally I will happily enjoy youtube-lyte on my website! :D

    Talk to you tomorrow,

    F.

    Reply
  9. FerranMV

    Perfect!

    I managed to get it working on my website!

    http://www.watchrecipe.com/tortilla-soup/

    As you said it was just closing the div after the /noscript, changing the address of the call to the .js and the definition of the var bU and changing the image.

    Now i think I just have to put ?wmode=transparent somewhere in the files… Do you know where?

    Dank u!

    Reply
  10. Ferran

    src=\"http://www.youtube.com/embed/"+this.id+"?autoplay=1&wmode=transparent

    This worked! Now the last thing that lacks is the youtube bar to show up on the image.. I dont know why this night it disappeared.

    Whatever, send me to your email a paypal accound and Ill get you a Belgian beer! ;)

    Reply
    1. frank Post author

      indeed, that should work. regarding the youtube control image; it does show up when I check our your tortilla soup recipe in firefox 4, weird you do not see it.

      regarding the bear; I don’t do paypall, but I’ll make sure to drink one this evening and I’ll consider it your treat anyhow! ;-)

      Reply
  11. Carolin

    Hey Frank,
    thanks for a great plugin! Would it be possible to make the output w3c compliant though? :)

    Reply
    1. frank Post author

      hi carolin. could you be a bit more specific? what do you think should be changed to be valid for what version of html? :)

      Reply
  12. Carolin

    Sure. :) I’m using xhtml1 (transitional) and my test site doesn’t validate because the img-tag isn’t closed and the script doesn’t provide an alt-text. I also get an “document type does not allow element “div” here” error.
    Basically the same errors that show up when you validate this blog post.

    Reply
    1. frank Post author

      ok, I’ll look into that for the upcoming 0.7.1, and I’m sure I can fix some of it, but as some of the weirdness is needed for wp-youtube-lyte to work, I won’t be able to make it fully xhtml compliant (and even if I could, it would still be invalid in other templates that follow other html spec versions).

      Reply
      1. Carolin

        Cheers. I did edit the code to make it compliant but would prefer not to have to do it again everytime there is an update. :)

  13. Sir Indie

    Awesome plugin! After being at bay due to another video plugin failure (that will go unnamed, but has the initials SY) and without support…your plugin allowed my site to come back to life.

    I just have one (non technical) tweak…I’m the furthest from understanding code and didn’t see a way to remedy this under SETTINGS but all of my vids are CENTERED when editing the post on WP, yet the plugin LEFT ALIGNS all the videos to visitors.

    Would anyone mind guiding the Clueless Guy on how to remedy this?

    Reply
    1. frank Post author

      small update: centering the player now (with version 1.1.3) is an option on the admin-page, no more fiddling in the css! hope you like it! :)

      Reply
  14. frank Post author

    hi sir indie;
    you can change the positioning of the lyte player by changing the css for .lyte in wp-content/plugins/wp-youtube-lyte/lyte/lyte.css.

    hope this helps,
    frank

    Reply
    1. Sir Indie

      Appreciate the quick reply Frank. Again, I have no clue to coding (but not scared to do a little research and give it a shot), but I added the following code right after “.lyte img”:

      {display:block;margin-left:auto;margin-right:auto}

      And still not getting the desired alignment. Do you mind shining a little light in this dark room of mine?

      SI

      Reply
      1. frank Post author

        can’t test right now, but adding that to “.lyte” a bit further up instead of “.lyte img” will probably do the trick!

  15. Sir Indie

    Frank! You. are. AWESOME!
    I’m back up and running good sir!

    Thank you for the quick responses and troubleshooting..

    I believe this deserves a tweet..Lol.

    SI

    Reply
  16. shinjing

    hi, great tutorial!

    i just wondering if this technique can be used on Vimeo or DailyMotion.

    did you ever try on this (embedding Vimeo/DailyMotion video)?

    Reply

Leave a Reply

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