WP YouTube Lyte

WP YouTube Lyte is a WordPress plugin that enables high-performance, responsive, search-engine optimized and accessible YouTube video, playlist & audio-only embeds. The most recent release is 1.3.x, which features an API to tailor the plugin to your very own needs.

Before reading all the text and examples below, you should check out how it looks and feels (and you might as well enjoy Rufus Wainwright’s “Oh what a world” while you’re at it):

Rufus Wainwright – Oh What a World

Watch this video on YouTube or on Easy Youtube.

Now about all that text; this is from the description on the wordpress.org plugin page:

WP YouTube Lyte inserts “Lite YouTube Embeds” in your blog. These look and feel like normal embedded YouTube, but only call the actual “fat” Flash or HTML5-player when clicked on, thereby reducing download size & rendering time substantially when embedding YouTube occasionally and improving page performance dramatically when you’ve got multiple YouTube video’s on one and the same page.

Just add a YouTube-link for a video or an entire playlist with “httpv” (or “httpa” to embed YouTube’s audio only) instead of “http” or add a Lyte widget to your sidebar and WP YouTube Lyte replaces that link with the correct performance-optimized code. When a visitor clicks the play-button, WP YouTube Lyte seamlessly initiates YouTube’s new embedded player. Some examples:

  • httpv://www.youtube.c0m/watch?v=_SQkWbRublY (normal video embed)
  • httpv://y0utu.be/_SQkWbRublY (video embed with youtube-shortlink)
  • httpa://www.youtube.c0m/watch?v=_SQkWbRublY (audio only embed)
  • httpv://www.youtube.c0m/playlist?list=PLA486E741B25F8E00 (playlist embed)
  • httpv://www.youtube.c0m/watch?v=_SQkWbRublY#stepSize=-1 (video player, one size smaller than what’s configured as default)
  • httpv://youtube.c0m/watch?v=_SQkWbRublY&start=20&showinfo=0 (normal video embed, but video starts playing at approx. 20 seconds and title/ author are not shown inside the player)

WP YouTube Lyte has been written with optimal performance as primary goal, but has been tested for maximum browser-compatibility (iPad included) while keeping an eye on accessibility. The plugin is fully multi-language, with support for Catalan, Dutch, English, French, German, Hebrew, Spanish and Slovene.

You can find the most recent WP YouTube Lyte information on this here blog. Feel free to ask questions or provide me with feedback in the comments on this page.

162 thoughts on “WP YouTube Lyte

  1. Olivier

    Hi,

    Thank you for the plugin is very nice,

    I just saw a bug with the plugin Infinite Scroll, when i am scrolling down, the 2nd page is loading and display, but youtube video are not display

    Can you check to fix this bug ?

    Thanks
    Olivier

    Reply
    1. frank Post author

      This behavior in infinite scroll (and similar) has recently been pointed out to me by another user as well. I’m still thinking of how that could be solved. The problem is that such plugins expect the content (all html) to be fully present, whereas wp youtube lyte consists of an empty DIV with some javascript inside to do the rendering during page load. I have a rough idea of how to solve this, but changes inside infinite scroll might be needed as well.

      Reply
    2. frank Post author

      Hi Olivier;
      I just pushed out version 1.1.0, it has support for Infinite Scroll. Let me know if you have any questions or remarks!

      kind regards,
      frank

      Reply
  2. Olivier

    Thanks to answer so fast,

    If that can help you, the plugin Lux Vimeo for Vimeo video is working well with infinite scrolling (check the website), maybe try to contact them or check how they coding the plugin to find your answer.

    I can’t change Infinite scroll, my customer want this one.

    Thanks
    Olivier

    Reply
    1. frank Post author

      Installed “infinite scroll” on my test-blog; I’ll have to do some changes (which are on my todo-list for 1.1.0 and are currently under development) and then you’ll just have to add “lyte()” in the “Javascript to be called after the next posts are fetched”-field in Infinite Scroll’s admin page. Version 1.1.0 will probably get pushed out towards the end of the month.

      Reply
  3. Yun

    Hi,

    Nice plugin that I’ve got around to using.

    With regards to the infinite scroll issues that some are facing, here’s a fix I used.

    In lyte.js, look for:

    p = d.getElementById(lyte_id);

    Replace with

    p = lytes[i];

    Cheers!

    Reply
    1. Yun

      An explanation on this issue would be that some plugins duplicate the nodes that are being created by your plugin. For “infinite scroll” plugins, there are usually two or more elements with the same ID on the page as they are duplicated.

      Seeing as getElementsByClassName already returns the elements. There’s actually no need to do a getElementById again. By doing a getElementById, it will retrieve the element correctly on the first iteration of your for loop, however on the second iteration onward, instead of retrieving the duplicated nodes, it actually retrieves the first one and appends to that.

      Using lytes[i] instead will get the intended element :)

      Reply
      1. frank Post author

        interesting observation Yun, thanks! I think you’re spot on as far as the double DOM-lookup is concerned, but not sure it solves the “infinite scroll” issue:

        the moment another page is requested using AJAX, lyte() has to run again. it will again build an array with all divs with className lyte, which will contain both the divs that have been rendered (for the part that was already visible) and the divs in the new part after which the rest of the script will (re-)render the player for each div in the array, indeed leading to “double appearances”. the fact that I do the double lookup will (as far as I can tell without examining my code) not change this behavior.

        the solution i have in mind (and which will include avoiding the double lookup) is to add a className (e.g. “done”) to a div that has been rendered by lyte() and checking for that className before rendering the player.

        that way “infinite scroll” just needs to call lyte() in “Javascript to be called after the next posts are fetched”-field in Infinite Scroll’s admin page and all will be well.

        but as I wrote, this is without checking the code, I might disagree with anything I write if I feel the urge to do so ;-)

        thanks for the feedback!

  4. Yun

    Some additional feedback:

    enablejsapi and origin would be good features to add on for the next version, I modified the copy of the plugin on my server to include those params so I can work on the Youtube iFrame API. You’ll also need to assign a unique ID to the iframe :)

    Reply
    1. frank Post author

      support for enablejsapi is indeed in 1.1.0 which I just pushed out (and the double DOM-lookup has been removed as well). thanks for the valuable feedback Yun!

      Reply
  5. Noel

    Hi, is there a way the video Autoplay can work, I’ve looked in the js and changed it from 1 to 0 and neither work. Really appreciate some help with this.

    Thanks.

    Noel

    Reply
    1. frank Post author

      Hi Noel. That is not possible, as autoplay defeats the purpose of wp youtube lyte which is to present a light dummy player until your visitor wants to actually see the video?

      Reply
  6. DOmz

    Hi!

    I like your intentions making it lyte as possible that only loads the “fat” flash when clicked. I have suggestions. For its widget, the Widget size, It would be nice if it has more bigger size options or user input size. And also it will be awesome if it has thickbox effects or something like pop-up player effects.
    Thanks and more power!

    Reply
    1. frank Post author

      Thanks for the feedback DOmz. Regarding “user input size” for widgets (or normal vids); this is on my longer term todo-list (it’s not that easy, because size is used to pick the correct “control.png” image). For the near future; what bigger widget size did you have in mind?

      Reply
  7. Pingback: Top WordPress Plugins for 2012

  8. CollinMaessen

    I have one issue with this plugin, and that is that its CSS file is placed in the footer. CSS files should never be placed in the footer as it can prevent progressive rendering of the page.

    If this could be fixed I would be appreciate it (the CSS issue is the only reason I’m not yet deploying it on my production server).

    Reply
    1. frank Post author

      Hi Collin; I only recently started loading the CSS in the footer.

      I had the following options to load CSS:

      1. load in HTML head, unconditionlly, so every page would have that CSS, even if not lyte vid is present
      2. load in HTML body (in wp footer), conditionally, i.e. only if a lyte-video is included
      3. trigger load of css in javascript, conditionally, but that can cause flickering as the CSS might not be loaded while the lyte video’s are rendering

      Based on tests I ran in several browsers (both on my own computers and via webpagetest.org) I found no evidence of rendering delays with the current approach, but if you have information of problems with this implementation, I’d be willing to change my opinion and load the CSS in a different manner! :-)

      Reply
      1. CollinMaessen

        Well for one it is not according the HTML specs if you don’t put a CSS file in the head tag.

        Secondly it can cause a white screen for your website until all resources are loaded (predominantly Internet Explorer). It won’t matter much in the sense of load time, but it does matter with the perceived performance for the user. As seeing the site being rendered makes it seem faster for the user than staring at a blank screen:
        http://developer.yahoo.com/performance/rules.html#css_top

        Also one problem my site has with the css file in the footer is that I can’t optimize it. I’m using W3 Total Cache to optimize CSS file (combine and minify). When the CSS file is in the footer W3 Total Cache doesn’t pick it up for some reason. So it’s triggering an extra download from my site that isn’t optimized.

        Strangely enough it does this also for the JS file you place in the footer. Although it should pick that up.

        Could be that both issues are caused by the way you include the JS and CSS files. As your plugin is the only plugin where I see this happen.

        (but don’t get me wrong, I am happy with the performance boost your plugin is giving me, it’s at least 2 seconds on the total load time)

        So for me it’s worth downloading the CSS file and priming the cache of the user for when the CSS and JS files are needed. Besides, most of the time people who need these kind of plugins use embedding a lot, like my site.

      2. frank Post author

        well, the reason for all of this probably is that the css and js are only loaded if they are actually needed (when there’s a lyte video to be rendered), which is something most wordpress plugins don’t do (they just stuff their js/css in the HTML head or body).

        autoptimize does pick up wp youtube lyte css & js though, so the “problem” is rather with w3 total cache’s implemention.

        the wp youtube lyte js & css are, i’m happy to say, minimized.

      3. CollinMaessen

        Btw, just realized this also makes it harder for me to style the html your plugin outputs (CSS in the footer). Also the style information in the HTML is causing issues for me. Why not use a class?

      4. frank Post author

        the HTML that is added to the DOM indeed has style-info embedded, for the simple reason a lot of that info is calculated by the javascript. check lyte/lyte.js to see what I mean :-)

        on the other hand the latest changes (in 1.1.0 and .1) did simplify the CSS to some extend, maybe I could move some more to lyte.css, I’ll look into that.

    2. frank Post author

      Well Collin, thanks to your questions I did some extra tests and I noticed that the javascript to lazy load the lyte videoplayer got “lost” during development of 1.1.0, which results in the videos being rendered even before document complete. I’m re-adding that code to lyte(-min).js as we speak. If you want you can download the new lyte-min.js here. Regarding the CSS; i’m considering to have javascript addi it to <head> as internal style (i.e. no extra download, no style in body, everybody wins). I’ll keep you posted!

      Reply
      1. CollinMaessen

        If the CSS and JS files are added in dynamically it would explain why W3 Total Cache doesn’t pick them up. W3 Total cache is geared to optimizing static content and protecting your database from unnecessary hits. Its goal with optimization of the JS and CSS files is to combine everything as much as possible in a single optimized download that can be cached. So if something is added in dynamically it can’t combine it.

        Now if you add your style information as an inline style in the document it will present its own problems. For one the style information must be send to the user with every single page that the Lyte plugin is used on. Which means browsers cannot cache this and will increase the size of the page it is used on. If I had to choose between this option and the CSS file in the footer, I would pick the footer option. As that can be cached by my visitors.

        It also will give me the same styling issues as with the CSS file in the footer. Inline styles in a HTML document always take precedence over an external stylesheet (currently I have fixed the styling issues with some jQuery, however it’s not ideal and not an option for users that don’t have the know-how).

        Could it be an option to let the user choose how the plugin will behave with the inclusion of stylesheets and JS files? This way you can give users the option to let the plugin decide when these files are included. Or for example an option where you can say always include these files no matter if the plugin is used or not (with maybe an option to say where the files should be included? footer vs header?). This way you give your users the option to get the most optimized solution for their situation.

        Seems to me like it would be a good option for a plugin that is aimed at improving performance of a wordpress blog.

      2. frank Post author

        Hi Collin;
        I’ve pushed out 1.1.2 yesterday (with a thank you in the changelog, actually).

        1.1.1 had:
        * an external stylesheet (in the body)
        * inline style (for non-static stuff, cfr. lyte.js source)

        whereas 1.1.2 has:
        * an internal stylesheet (in the head, as added by javascript)
        * inline style (no changes there)

        Some reasons for choosing the internal stylesheet approach:
        * I want to avoid having WP YouTube Lyte adding CSS/JS to a page if not needed, so it can’t be in the head, meaning the CSS won’t (always) get picked up by optimizing plugins.
        * Google Page Speed advises to “inline” small bits of CSS when not being able to combine them with other CSS.
        * The impact of having the CSS in the HTML is minimal: 763 bytes uncompressed, 450 bytes when gzipped.
        * I did some tests to compare the two approaches and 1.1.2 indeed is clearly faster.

        Although technically it is feasible to offer the options you propose, I don’t want to clutter the admin-screen with choices that are too technical in nature. I’m pretty sure WP YouTube Lyte in this configuration is _a lot_ quicker than most (if not all) other YouTube plugins and than the oEmbed approach in WordPress. I’ll post a new performance comparisons soon, stay tuned! ;-)

  9. Rudolf

    There is something i would like to suggest here:
    At the end of each standard YT video we see the sometimes rather pesky “Related videos” rostrum.

    If we use the EMBED option in YT and untick
    “Show suggested videos when the video finishes”
    we can get rid of that – but, i assume if i use the iframe method code i leave the realm of WP YouTube Lyte or do i??

    If i do, i would prefer to see a short code option that contains that “rel=0″ add on, can this be done??

    Say
    http://www.youtube.com/watch?v=_QhCxE3463s?rel=0
    or so???
    Please advice, if currently not possible, can it be integrated as an option in your next update please??

    Reply
    1. frank Post author

      Morning Rudolf;
      rel=0 is in there already as default behavior, no change needed there unless you would to be able to unset this (and indeed have related vids showing up at the end).

      kind regards,
      frank

      Reply
  10. CollinMaessen

    Finally had some time to test the new setup of your plugin and I’m happy with your changes. :)

    For styling I still prefer an external stylesheet instead of inline styles. But using !important rules means I’m able to override the default behaviour.

    But lets be clear, I understand why you are doing things as they are and it provides a very significant performance boost (you took a good pragmatic approach). Your plugin is one of the reasons I managed to remove 4 to 8 seconds of loading time. Now all my pages load within 4 seconds (primed cache or not). Often even within 3 seconds.

    The only situation when loading time exceeds 4 seconds is when W3 Total Cache isn’t primed and needs to generate the cache files.

    So with these changes I’ll be able to deploy a new and vastly improved version of the custom theme I’m using.

    Reply
  11. Rudolf

    Hi Frank, i think my direct email reply double down question about your answer
    “rel=0 is in there already as default behavior”
    did go nowhere, so i better post this here again.

    I have made test video installations WITH your plugin (hence just using the short Share URL from YT) and also one using the Share > Embed version code from YT (which – i assume – bypasses your plugin?).

    Here are examples of the 2 variations:
    http://titus-shanghai.com/training-vesoul-1842012/357/
    This video uses the EMBED code with “rel=0″ embedded in the code, and, nice side effect, the option to manually scale the video / player to the precise width and height that fits the page space best.
    At the end of the video you see, no “related nonsense” suggestions!

    On post
    http://titus-shanghai.com/dunlop-cup-wohlen-2012/263/
    i have several videos all with your plugin (hence just the short Share URL from YT).
    The top video is pretty neat to watch as it shows go kart racing in slow motion, and very short as well – and at the end of each of these videos i have these pesky “related videos” (one from a basketball game (!!).
    I checked hi and low in the plugins settings, can’t find anything that could be set to disable this, so i do not understand why you mention “it’s already built in..”.
    Is there something i need to change or do that i have not understood thus far to stop the “related videos” stuff also when using your plugin??

    P.S. the standard sizes from YT are rather crappy when displayed in WP, maybe an idea for a future release to add a size option, best with 2 boxes to manually type in width and height.

    Reply
    1. frank Post author

      morning Rudolf;
      the video’s on http://titus-shanghai.com/dunlop-cup-wohlen-2012/263/ are not embedded with wp youtube lyte i’m afraid. I guess you have

      http://www.youtube.com/watch?v=B8aXYglWiQ4
      or
      http://youtu.be/B8aXYglWiQ4

      in the post, but to have these handled by wp youtube lyte, you have to add a ‘v’, to have

      httpv://www.youtube.com/watch?v=B8aXYglWiQ4
      or
      httpv://youtu.be/B8aXYglWiQ4

      and if that is the case, related video’s will not be shown. I’ve put up a post on my testblog with the slow motion video, no related video’s to be found :-)

      regarding variable sizes; it’s not that easy to implement, but it’s on the wish-list :-)

      hope this helps!
      frank

      Reply
  12. Rudolf

    Thanks Frank.
    I did add the v to httpv:// now and that is that.
    I had read the part about inserting the v for videos but it was not clear to me it would take care of the “related videos”.

    Now that i have done this the video sizes have changed though.
    Oddly enogh only 2 of them now have huge black bars above and below the actual videos – while the third one shows okay – but all 3 are short URL’s, not sure what to make of this.
    http://titus-shanghai.com/dunlop-cup-wohlen-2012/263/

    So i looked at your test pages source code and found:
    Embedded with WP YouTube Lyte.
    and used this at the bottom of the 3 original videos, and this now formats the video okay – only that the kid can not work with this kind of code for every video…..

    Now also added a LONG link below for testing, meaning Share > Options > Long
    which contains the v in
    http://www.youtube.com/watch?v=VTDrFMm5IqI
    but now the video is smaller and it has the “related videos at the end again…
    putting the v back in
    httpv://www.youtube.com/watch?v=VTDrFMm5IqI
    gives me again those ugly huge black bars on top and buttom, plus, this time not even the video title is showing anymore, i am still confused??

    Reply
  13. Rudolf

    Oh, the think with the black bars on top and buttom seems to be solved, had Player size on 640×480, now on 640×360…..
    So it looks it was just about the v that needs to be added to the Share link every time….
    (My WP YOU TUBE Lyte is in German because the site and WP version is as well, and the translated Text
    “Sie können Video und Audio in Ihre Artikel und Seiten einfügen, indem Sie einen oder mehr httpv- oder httpa-YouTube-Links im Text verwenden” probably was not clear enough for me.
    I would rephrase this to:
    “Um Videos mit WP YouTube Lyte einzufuegen muessen Sie nur ein v zum Share URL hinzufuegen, also z.B.
    httpv://youtu.be/6dkgvhFJDgc
    anstatt nur
    http://youtu.be/6dkgvhFJDgc

    Um Audio mit WP YouTube Lyte einzufuegen muessen Sie nur ein a zum Share URL hinzufuegen, also z.B.
    httpa://youtu.be/6dkgvhFJDgc
    anstatt nur
    http://youtu.be/6dkgvhFJDgc

    The a’s and v’s bold and red, and it will be clear as chicken soup to everyone in the German language zone what needs to be done / how it works.

    Reply
    1. frank Post author

      glad it works Rudolf. the translations need work (some of the text has changed) anyway, but I’ll forward your proposal to the German contributor!

      Reply
  14. Robert Campbell

    Great plugin! I want to use it as a widget but the 200 pixels wide is not enough. Anyway to change to say 250×200?

    Reply
    1. frank Post author

      Thanks Robert! I’ll indeed add 250X200 in a future version, but I haven’t got a release planned for the near future (unless a bug comes up for which an urgent fix is needed) I’m afraid.

      In the mean time you could edit player_sizes.inc.php, adding

      $wSize[5]['h']=200;
      $wSize[5]['w']=250;
      $wSize[5]['depr']=false;

      at the end, but before the ‘?>’.

      After that you’d also have to create controls-250.png (250 pixels wide) and add it in lyte/ to make sure the controls appear at the bottom of the player.

      hope this helps!
      frank

      Reply
  15. Pingback: 本站安裝的Wordpree外掛一覽表 - Hareion's手札

    1. frank Post author

      well, the core of wp youtube lyte is javascript which searches for divs that have class “lyMe” and an id of form “WYL_12345678″ where 12345678 is the video id in youtube.

      you can find all files here:
      http://plugins.svn.wordpress.org/wp-youtube-lyte/trunk/

      so if you load that JS in your site you’re almost there. only a couple of details left:
      1. make sure you have some css defined (I add it dynamically in wp-youtube-lyte.php)
      2. make sure you set a width and height on the div
      3. upload images (play.png and control-xyz.png, where xyx is the width you set in (2), both in trunk/lyte/)
      4. make sure to set bU to the URL where the images can be found

      Reply
  16. Mye

    Hi, first thanks for this plugin! It´s great.

    The first couple of videos I posted on my pages works fine, however, when I added this post I´m doing as I inserted a you tube video it doesn´t work. I am not a techie person, no idea about codes.

    I would appreciate your help. Thank you very much!

    Reply
    1. frank Post author

      Hi Mye. Can you provide me with the URL where that is happening (here in the comments or via mail at futtta at gmail dot com)? I’ll be happy to go & check out what is going wrong!

      Reply
    1. frank Post author

      httpv://www.youtube.com/watch?feature=player_embedded&v=yd00SujscFc
      indeed does not work, because the ?feature=player_embedded confuses the plugin. I’ll look into this, but in the mean time, if you change the video-link into
      httpv://www.youtube.com/watch?v=yd00SujscFc
      all should be well.

      hope this helps!

      Reply
  17. Mye

    Hi Frank,

    Thanks a lot!!! It works now! You´re such a blessing.

    Keep it up & more power to you!

    Mye

    Reply
  18. CollinMaessen

    I just found a issues with your plugin. For some reason the youtube video isn’t loaded correctly on an iphone in safari.

    If I ‘click’ the video to start it I see the browser load the youtube player. But it doesn’t play the video.

    After the second ‘click’ it will play the video.

    I suspect this is just some quirk with how your plugin loads videos and that iOS can’t handle this correctly. Could you look into this to see if you can resolve this behaviour?

    Reply
    1. frank Post author

      Hi Collin; the problem with ipad/iphone/ipod should be solved with 1.1.5, which I released earlier today. Thanks for your input!

      Reply
    1. frank Post author

      Hi Katrina; I’m not to familiar with multi-site, but between 1.1.3 and 1.1.4 there were no changes that seem significant enough to make it go form ‘works’ to ‘does not work’. Were you indeed on 1.1.3 before, or were you on an older version (in which case; what was the exact version with which it did work)?

      Reply
      1. Katrina

        I was on 1.1.3 though not completely sure it was working then. And may have previously went from a major upgrade because I wasn’t updating regularly until recently.

        I just deleted it and reinstalled and tried both network activate and individual activate. And it still isn’t working now.

      2. frank Post author

        I did some reading up on multi-site module compatibility, and did not find pointers that are relevant to wp youtube lyte. I’ll enable multi-site for a test-blog of mine and see if I can reproduce the behavior you’re seeing (or rather, not seeing) and report back.

        What could be interesting, is info in the php error log, can you check if there’s anything relevant in there?

      3. frank Post author

        Hi Katrina; a quick follow-up. I enabled multi-site on my testblog and now have http://futtta.be/wordpress and http://futtta.be/wordpress/blognr2, on both of which WP YouTube Lyte works as expected (as it does not saves files on the filesystem or stores data in the database, both of which are different for multi-site).

        I’d really love to debug the problem though, so if you could create a temporary blog on your multi-site install for me to play with and if we could add some debug code to wp-youtube-lyte.php, I’d be happy to dig deeper! Let me know :-)

  19. Katrina

    Thanks so much for your help. I think it may be related to some of the security items I’ve put in (I was hacked a month ago). When I get a chance I will set it up.

    Reply
  20. Fancyplayer

    Amazing Plugin! Is there a way to combine WP youtube lyte with the easy fancybox plugin (http://wordpress.org/extend/plugins/easy-fancybox/)?

    That would be a perfect combination for me. Max. performance and convenience by having wp-youtube-lyte only showing an image of the youtube video – and then max. coolness by having the embedded youtube player show up in a lightbox after clicking on the image.

    Help would be much appreciated :)

    Reply
      1. frank Post author

        Currently not Fancyplayer. I might look into some kind of hooks to allow integration with other javascript thingies, but that’ll be for a later release.

      2. Fancyplayer

        Couldn’t I just edit the code of your plugin Frank? So that the link (by clicking on the “play button” of your plugin) includes a class=”fancybox-youtube” addition?

        Unfortunately, I cannot find the appropriate line in the php code – could you help me out please? That would be soooo fantastic!

        As far as I understood the easy fancybox plugin, I just need a class=”fancybox-youtube” in the link. Then, the combination of both plugins should work hopefully.

      3. frank Post author

        It isn’t that easy, as you’re not clicking a link, technically.

        But I did some quick tests, and if you open up lyte/lyte-min.js and change

        tH.innerHTML="<iframe id=\"iF_" + vid + "\" width=\"" + tH.clientWidth + "px\" height=\"" + aHgh + "px\" src=\""+eU+"autoplay="+aP+"&wmode=opaque&rel=0&egm=0&iv_load_policy=3&hd="+hidef+qsa+"\" frameborder=\"0\" style=\"" + aSt + "\"></iframe>"

        into
        jQuery.fancybox("<iframe id=\"iF_" + vid + "\" width=\"" + tH.clientWidth + "px\" height=\"" + aHgh + "px\" src=\""+eU+"autoplay="+aP+"&wmode=opaque&rel=0&egm=0&iv_load_policy=3&hd="+hidef+qsa+"\" frameborder=\"0\" style=\"" + aSt + "\"></iframe>");

        then you’ll have something that might work, more or less (but the fancybox will be too high for audio-only, for example), as can be seen on my test-blog.

        hope this helps!

      4. Fancyplayer

        Frank, you are a true hero!!! It’s almost done! After having added your posted code, I am able to open the youtube videoplayer in the fancybox out of the youtube lyte “preview image”.

        There is just one issue left: This only works once! I cannot close the opened youtube video in the fancybox and open it again. So at the moment, I can only play a youtube video one time. When I close the fancybox, nothing happens by clicking on the “preview image” of youtube lyte again.

        Do you have an idea what the problem is and/or how to solve this?

        I’m so damn curious, because it’s almost done :)

      5. frank Post author

        ah, in lyte-min.js there’s tH.onclick="";, this disables the onclick event handler from the “preview image”. if you remove that code, you’ll be able to re-open the same youtube in your fancybox :-)

      6. Fancyplayer

        Damn, it works fantastic now – thank you soooooooo much Frank! Not only have you developed an awesome plugin, you offer first class support as well! Amazing!

        I’ve got one last question (and if it is too much stress, feel free to say: “no, i can’t answer that”):

        Is it possible to have a 420×315 px “preview image” of wp lyte, and when I click on it, the actual youtube player has 640x480px in the lightbox?

        With this functionality, the lightbox combination would begin to make even more sense :) That’s why I’d love to have this. :)

      7. Fancyplayer

        That’s a pity, but I can understand your point of view!

        The developer of the WP easy fancybox plugin added a slight improvement. As a fallback solution, he mentioned the following:

        if( jQuery().fancybox )
        {
        jQuery.fancybox(“”);

        } else {
        tH.innerHTML=””;
        }

        Might be of interest for some folks out here :)

  21. Spencer

    It will not show some of the videos, like it is there but it says it won’t show it on my website, for example go to my website gotspin.net/blog and then look at the article “The Return of The Saucepan Dalek”

    Reply
    1. frank Post author

      Hi Paul. Is your homepage a more or less default list of posts that iterates over the_post or the_excerpt? In that case; sure! If not, some additional coding might be needed for the youtube-links to be replaced by “lyte”-divs. The javascript-part of the plugin can handle different sizes (using the #stepSize parameter).

      Reply
  22. Fancyplayer

    Frank, just another question: Is it possible to have custom playlists within WP youtube lyte?

    I want to achieve the following:

    Embed a single youtube video, after this is finished, another youtube video starts. Both videos are not in a regular youtube playlist. Rather, I want to “build” a custom playlist with some shortcode or the like within WP lyte and/or TinyMCE.

    Reply
  23. Franz

    There’s an Idea in my head ;) Could you give, users of a lightbox-plugin, the option to open videos inside a lightbox? It’s because I’m using Lightbox Plus and it’s a feature i’m searching for.

    Reply
    1. frank Post author

      The problem is there’s a lot of lightboxes out there. In an earlier comment I had a quick look at integration with Fancybox, I would expect the lightbox-solution to be comparable.

      I might, one day, add an optional “play override input form” in which anyone could copy/past javascript-code to be executed (e.g. the fancyplayer stuff) instead of the normal lyte-stuff, so at that point you could put a lightbox-integrated play solution in there.

      Reply
  24. Aernout

    Hi, as a reply to a post by “Fancyplayer” who added some more script as received by the author of EasyFancybox: where do I place that piece of code? I’m not a jscript author…

    Thanks!

    Reply
    1. Aernout

      Hmmm – with the changes mentioned above to make it work in EasyFancyBox, I’m afraid I haven’t been able to make this work… What a pity – it looks fantastically easy.

      Reply
    2. frank Post author

      afraid this is an … advanced topic aernout; the code you mention should be added to lyte.js and re-minified to go into lyte-min.js. a future version of wp youtube lyte might have an form-field in which javascript can be copy/pasted to override the default lyte play function, so it might become slightly easier.

      Reply
  25. Jeff

    Hi,
    Let me start by stating I am new to WP. I am in the process of creating a new WP site for our company. I have installed your lyte plugin and it seems to work great with one exception, in my thumbnail posts the URL for the youtube videos is visible (does not show up in regular posts). Here is the ULR for our blog where the text is visible (http://www.upbeatday.com/blog-archive/) look under the latest post. Please note upbeatday.com is our test site; our production site is http://www.breezyhillmarketing.com.

    Thank you!
    Jeff

    Reply
      1. frank Post author

        Ow, can’t download it, that complicates things. Could you provide me with archive.php and functions.php, I think (hope) the info I need might be in there? You can mail me at futtta at gmail dot com.

    1. frank Post author

      Hi Jeff; I was working on a small update (to fix playlists) and found a small bug in the excerpt-code. Can you download http://futtta.be/lyte_update.zip and use wp-youtube-lyte.php and lyte/lyte-min.js in there to replace the files on your server? If that does not work, I’d like to have a look at the functions.php in the BigFeature theme to see how their bf_excerpt-function relates to wordpress’ implementation (which I hook into).

      Reply
    1. frank Post author

      Hi Jeff;
      I contacted the developer of the BigFeature-theme on his forum, as from the upcoming BigFeature 1.5 this should be solved.

      Kind regards,
      frank

      Reply
  26. CollinMaessen

    Hi Frank,

    I’m back at it again, coding and running into an interesting edge case.

    In my country The Netherlands we now need to request permission for all non-functional cookies that are set on a user device.

    To prevent some legal mess and a lot off coding I would really appreciate the following option:
    Embedding via http://www.youtube-nocookie.com

    Basically this is the url youtube uses when you enable privacy mode for embeds. See the following page for some details:
    http://support.google.com/youtube/bin/answer.py?hl=en&answer=141046

    With this I can comply to the Dutch Cookie Law without hacking your plugin or writing some nasty code.

    Reply
    1. frank Post author

      Well, that really is not an easy one Collin;

      On one hand youtube-nocookie.com was indeed used before and I’m very much into privacy & cookie law (cfr. my other plugin, WP DoNotTrack)

      But in this specific case I decided against continuing to use youtube-nocookie.com for the simple reason that when embedding on that domain youtube won’t honour users that are in the HTML5-trial as that preference is … stored in a cookie on youtube.com.

      Until YouTube switches from a cookie-based “HTML5 trial” to a “OS/Browser feature”-based approach, WP YouTube Lyte will have to use youtube.com as domain (but you can easily change this in wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js).

      Reply
      1. CollinMaessen

        Thank you, that update works. It now only sets the functional cookies it needs but not tracking cookies (which makes it compliant with the Dutch Cookie Law).

        What did you change to get this behaviour?

      2. frank Post author

        I changed the base URL for the thumbnail-images from img.youtube.com to i.ytimg.com.

        There is, however, by default also a call to gdata.youtube.com (the YT API), which might also set tracking cookies. If you want to get rid of those, you can add “&showinfo=0″ to the httpv-link. This will stop the API-call request from being made (but in that case no title will be shown).

      3. CollinMaessen

        Aha, so that’s how you did it. Didn’t notice you had changed some of the requests when I was reviewing the cookies being set.

        But I never did notice gdata.youtube.com set any tracking cookies. Or use them after I visited YouTube itself. So I’ll keep an eye on it but I think it should be fine.

  27. Don

    Wow, just installed wordpress 3.4.2 few daya ago. Settings up website, and just spent the last 2 hours trying to post a youtube video into my blog. Tried 5 other plugins with no success,,, and yours worked! Thank you!!!

    Reply
  28. Pingback: Adding Media To Your Post | Mediated

  29. Pingback: Plugin – WP YouTube Lyte | DJack.eu

    1. frank Post author

      I see you switched to a normal youtube embed, so it’s pretty hard to diagnose now :)

      Did (do) you also LYTE-embed video’s (instead of playlists)? does that work? did you notice any error in the javascript console?

      Reply
  30. Julian

    Hi there

    I just had a problem with you plugin. In the code I found this piece:

    Unfortunately this will be shown in the Google Snippet when you use WordPress as a CMS and remove the publish date of the article or site. Therefore I have to remove this line from you plugin.
    It is not needed in the schmea.org syntax, so I guess you can remove this line in your plugin?

    regards
    Julian

    Reply
    1. frank Post author

      Morning Hubert; you should not put any tags around the httpv-link, just
      httpv://www.youtube.com/watch?v=JXFNdu7Jf4A

      is enough, the plugin takes care of the rest for you.

      Reply
    1. frank Post author

      99% chance that you’re adding a link around the httpv-URL Michael, but that indeed breaks things. Just the httpv-URL and WP YouTube Lyte will do evertything else.

      Reply
  31. rivera

    Hi Frank, thanks a lot for the plugin, I love it.

    I only want to embed audio and with a smallest possible player. I already changed the witdth parameter in the “wp-youtube-lyte/wp-youtube-lyte.php” file as you see below.

    Is there a way to remove the digital timing data, the full screen button, and perhaps even the position bar? I would prefer to have just the play button, the volume, and the youtube logo, in a very minimalistic way.

    Thanks a lot, r

    if ($audio===true) {
    $wrapper=””;

    Reply
    1. frank Post author

      I don’t think that is possible I’m afraid Rivera; WP YouTube Lyte uses normal youtube embeds to play the video’s, and hiding only parts of the bottom control-bar isn’t possible. The only way to accomplish this, would be to use the YouTube javascript API and to play the (hidden) video when a non-YouTube play-button is pressed. This is the way Pitchfork seems to function these days, but it is -for now, at least- outside the reach of what WP YouTube Lyte can do.

      Reply
      1. rivera

        Frank, thanks for the quick response. I also noticed that reducing the width to 35% looks OK on desktop Safari, but something goes wrong on iPad and only display a colorful line without any controls. I am not sure whether it is the problem of the plugin, the WP or the YouTube API. You can check this post of mine as an example here.

      2. frank Post author

        I don’t have an iPad to test on I’m afraid. Does it work with the normal settings (i.e. the normal max-width)?

  32. rivera

    I just checked the normal settings with desktop Chrome (28.0.1500.95) on OS X (10.8.4) and has the same problem, instead of the standard YouTube controls I only see a colorful bar (it’s the horisontally shrinked version of the opening image of the embeded clip).

    Reply
    1. frank Post author

      Hi Mat;
      you can change the default size on the admin-page, but the shortcode-version does not support “modifiers” such as stepSize, start & showinfo (yet).

      frank

      Reply
  33. Collin Maessen

    Hi,

    I noticed two quirks in the latest release of your plugin:

    1) if your plugin encounters an error it can prevent the Jetpack Like widget to load on the page. It will just display loading forever until I remove any embeds that uses the YouTube Lyte plugin (it also happened with one video that is available, if you want the video in question for debugging purposes just contact me via email and I’ll send it to you).

    2) When a video isn’t available any more the YouTube Lyte plugin will trigger a request that ends in a 404. The origin is the lyte-min.js file that executes a call to http://gdata.youtube.com/feeds/api/playlists/?v=2&alt=json-in-script&callback=ly.parsePL&fields=id,entry

    I would also like to suggest the following feature:

    If a video is found and correctly embedded, please add the total play time in the placeholder html that you add. This is what the standard YouTube embed also does and tells the user how long the video is before they start playing the video. This would be a nice addition as then your plugin is visually indistinguishable from the standard YouTube embed.

    Reply
    1. frank Post author

      Nice suggestion, I’ll add that to my list of potential new features :-)

      regarding the quirks:
      2. nothing much I can do about that at first thought. or maybe by checking for HTTP response-code …
      1. does “encounter an error” mean the behavior you describe in (2)?

      Reply
      1. Collin Maessen

        Oh no, sorry for being vague on that point. With an error I meant the video no longer being available for some reason. For example it being deleted or privated by the uploader.

      2. frank Post author

        OK, thanks for the feedback, I’ll dive into this soonish (working on a new minor Autoptimize-release now).

  34. Steve

    Really silly one.. im trying to get the video to be centred in the text.

    see… http://93.174.141.45/~uknaviga/?page_id=25 but everything I try its always on the left hand side. Even tried putting it inside its own frame…

    code at moment is…

    httpv://www.youtube.com/watch?v=klYXh4U9_YE&rel=0&showinfo=0

    I am a newbe on WordPress and have not done anything like this for number of years so your help would stop me pulling out the little hair I have left..

    Reply
  35. Jan

    Is it possible in some way to make your excellent plug-in to replace the default embedding in WordPress? If the user pastes a Youtube-link without httpv:// I still would like Lyte to take care of the embeddning. Is this possible?

    Regards, Jan

    Reply
    1. frank Post author

      It is Jan, using the API. This code switches every youtube-link into a lyte video;


      function lyte_force_nonhttpv($content) {
      $content=preg_replace('/https?:\/\/(www.)?youtu(be.com|.be)\/(watch\?v=)?/','httpv://www.youtube.com/watch?v=',$content);
      return $content;
      }
      add_filter('lyte_content_preparse','lyte_force_nonhttpv',10,1);

      It is one of the examples in lyte_helper.php_example actually, so if you move that file to /wp-content/plugins/lyte_helper.php, uncomment the add_filter line and activate the “lyte helper” plugin all should work.

      Kind regards,
      frank

      Reply
  36. Yun

    Hi Frank,

    Great job on maintain the plugin thus far, I’m still using it after 2 years :).

    Could you look at applying the lyte_settings filter after the theme is set up instead? I’ve modified v1.4.2 of the plugin that I run to do this instead. The current way the filter is executed completely ignores any filters that the theme might apply to modify the settings. I’m using this filter to modify the lyte_position setting because my theme doesn’t like the margin’s set on the wrapper.

    What I did was:

    function lyte_settings() {
    global $lyteSettings;

    /** API: filter hook to alter $lyteSettings */
    $lyteSettings = apply_filters( 'lyte_settings', $lyteSettings );
    }
    add_action('after_setup_theme', 'lyte_settings' );

    Thanks!

    Reply
  37. Octocorn

    Hi, Frank!
    I’m testing this plugin localy on mi Instant WP and I’m finding some accessibility issues. I can’t get to player using the screen reader controls and through screen reader point of view the page seems just as no YouTube video on it. I need to click the area with the mouse and only then the player frame becomes visible to screen reader.
    My visitors are mostly blind or partially sighted so i try to maintain my page screen reader friendly as much as I can. I was thinking of replacing JetPack YouTube integration with your plugin so I can embed YouTube clips with no video but it is not working for me. Can you do something about it?
    Thanks!

    Reply
    1. frank Post author

      Hi Octocorn;
      WP YouTube Lyte main goal is performance. For this aim, the actual YouTube video iframe indeed is not loaded. Now the video placeholder (which looks like a normal youtube embed) is present in the HTML and it does have some accessibility-related characteristics. So the question is; what would you expect your screen-reader to see (except for the actual YouTube video that is) and what is visible now?

      frank

      Reply
      1. Octocorn

        Hi, Frank!
        When I use JetPack YTB Embeder or YouTube Lite with video the screen reader announces something like “Flash start, YouTube frame, blah blah, Play button, blah, blah, YouTube frame end, Flash end”.
        When I use YouTube Lite with ‘httpa’ the screen reader doesn’t see it at all. I’d like for this player frame to be anounced somehow while screen reader aproaches it, maybe “Player frame, Play, Pause, Stop…, Player frame end” and to be able to see actual controls on the screen with no video.
        Hope this makes sense cause I’m not native English speaker and quite a newbie to this whole WordPress, CMS, HTML and PHP stuff xD.
        Thanks!

      2. frank Post author

        does the screen reader see the lyte-video even before clicking play? is the problem limited to httpa-lytes?

  38. Octocorn

    Hi!
    Yes and yes. This is exactly what is happening. When I embed standard ‘http’ or ‘httpv’ links screen reader sees it prior to playback. When I embed ‘httpa’ links screen reader acts like it is nothing there although player buttons are visible on the page.
    Hope I explained it well.

    Reply
      1. Octocorn

        Hi!
        Here’s the results. When I opened the first link you provided I was able to hear the following:
        “Watch this video on (link) YouTube or on (link) Easy Youtube.(Rahshaan Roland Kirk – Spirits Up Above)”

        On the second link you provided screen reader read the following:
        “Snow And Taxis (clickable). Watch this video on (link) YouTube or on (link) Easy Youtube.”.

        On the second page when I hit Enter on the “clickable” the Flash frame appeared, playback started and I was able to actually see the video.
        So, I guess we’re approaching the point here. I’d like something similar to the second link but with no video in it, just audio player with usual controls.
        Regarding the screen Reader part, I’m using Jaws for Windows (www.freedomscientific.com) but I’m not able to recommend other online sources. Bllind users are more into mailing lists rather than online forums. From what I understand, screen readers read the HTML code in web pages and compile it to some understandable speech or Braille output just like web browsers compile the code to visual output. Well, not sure did I explained this properly but I hope you’ll get the picture.
        Take care!

      2. frank Post author

        OK, so the problem is there is no “visible” content for audio-only lytes. I’ll see what I can do to change that.

      1. Octocorn

        Nope. Still doesn’t read.
        It crossed my mind.. Is there an option to add alt text to the frame?
        When I insert a picture somewhere with no alt text screen readers pass it by like nothing’s there but when I include
        alt=”something”
        screen readers recognize it as graphic and read:
        “graphic something”.
        If this is doable with the Flash frame it would do the job.

      2. frank Post author

        OK, I added an alt-tag to the audio-wrapper (although I’m not sure that is semantically correct on a div). Can you check?

  39. Octocorn

    Hi!
    Still nothing. What would happen if you’d paste a ‘httpa’ link in the example which was working and opened the full video after hitting Enter on it? I believe it was something with snow and taxis.

    Reply
    1. frank Post author

      I think the problem is that the audio-only-player has no visible content, whereas the video-player has the title. I’ve now changed the CSS for audio-lytes not to hide the title, can you re-test?

      Reply
      1. Octocorn

        Hi!
        This does it!
        Excellent!
        Can you remove those ‘watch this on youtube’ and’watch this on youtube lite’ features temporarely just for final test?

  40. Octocorn

    OK, that’s it!
    Now it works flawlessly. Thank you for effort.
    Do you happen to know when will the release with this fix be out?
    Thanks again and keep up the good work!

    Reply
    1. frank Post author

      Not sure when I’ll push out a new (minor) release, but you can easily make the change yourself;

      1. open wp-content/plugins/wp-youtube-lyte/wp-youtube-lyte.php
      2. go to line 405
      3. in there locate this part near the end:
        .lyte-audio .play,.lyte-audio .tC{display:none}

      4. change that into
        .lyte-audio .play{display:none}

        (so removing “,.lyte-audio .tC”)

      5. save changes and close the file

      Let me know if that worked!

      Reply
      1. Octocorn

        Hi!
        It worked. Hope there’s only one instance of the code because I used Find and Replace feature for this.
        There’s one more thing but it’s not crucial for the moment. After the full clip is played out screen reader doesn’t see it but it’s nothing one page refresh cannot fix so it’s not a big deal.
        If you know without too much trouble what could it be OK but if not don’t worry about it.
        Thank you again for support and take care!

      2. frank Post author

        there indeed is only one instance of that code.

        regarding the clip not being visible after having played; no easy fix, but I’ll give it some thought.

  41. Octocorn

    Don’t worry about it.
    I installed the plugin on my official site now, applied the fix you provided and now it’s working just fine. Before, while I was using JetPack’s YouTube plugin the Flash frames were visible for screen readers only in Internet Explorer and not in Firefox, now the frames are visible in both browsers so guess I killed two flies at the same time xD.
    Thanks for your help and take care!

    Reply
      1. artur

        Ok thx. No there isn’t a href. On IE 11 isn’t the switch but on firefox. I look on my firefox settings. Thx for fast answer.

      2. frank Post author

        hmm, just checked your HTML source, there really is a “a href” around the lyte div; remove it and you’ll be OK.

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>