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

42 thoughts on “Lite YouTube Embeds in WordPress”

  1. 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
    • 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
  2. 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. 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. 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. 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
    • 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
    • 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. 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
    • 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. 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
    • 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
    • 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://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. 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! 😀
    Talk to you tomorrow,
    F.

    Reply
  9. 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
    • 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
  10. 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
    • 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
      • 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. 🙂

        Reply
  11. 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
    • 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
  12. 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
    • 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
  13. 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
  14. 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 to frank Cancel reply

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