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. Version 1.6.0 was released on April 3th 2015 and features authenticated access to the YouTube API to ensure continuing integration with YouTube.
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

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.

188 thoughts on “WP YouTube Lyte”

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

        Reply
  4. 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
  5. 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
    • 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. 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
    • 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. 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
    • 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
      • 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.

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

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

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

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

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

          Reply
  8. 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
    • 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
  9. 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
  10. 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
  11. 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
  12. 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
    • 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
  13. 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
    • 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
    • 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
  14. 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
    • 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
  15. 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
    • 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
      • 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.

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

          Reply
        • 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 🙂

          Reply
  16. 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
  17. 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
      • 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.

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

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

          Reply
      • 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 🙂

        Reply
        • 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 🙂

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

        Reply
      • 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 🙂

        Reply
  18. 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
    • 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
  19. 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
  20. 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
  21. 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
    • 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
    • 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
  22. 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
    • 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
  23. 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
    • 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
      • 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?

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

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

        Reply
  24. 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
    • 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
  25. 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
    • 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
    • 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
  26. 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
    • 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
      • 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.

        Reply
  27. 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
    • 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
  28. 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
    • 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
  29. 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
  30. 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
    • 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
  31. 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
  32. 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
    • 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
      • 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!

        Reply
  33. 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
      • 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!

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

        Reply
  34. 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
  35. 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
    • 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
      • 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!

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

          Reply
  36. 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
  37. Hi! I was just trying to implement your plugin to my website but it doesn’t seem to work. All the youtube embeds are already in the httpv:// format, but they do not show. They are, however, mostly in the comments – is this the problem? – that your plugin only embeds videos in posts and pages, but not in comments? Or maybe even in bbpress topics/replies?
    Thanks!

    Reply
      • Thanks for the quick reply. Can you just point me towards the right direction – I don’t really know what API means, but I could probably figure it out by myself, if you only give me a short explanation, what I should do.
        Thanks!

        Reply
  38. Adding to my previous comment:
    So the trick is to look not just into “the_content” (which I guess is the post and the pages content, and is probably defined here “function lyte_parse($the_content,$doExcerpt=false)”), but also in the comments…
    I added this code to lute_helper and it looks that it works.
    add_action(‘lyte_actionsfilters’,’lyte_force_comments’,10,0);
    function lyte_force_comments() {
    add_filter(‘comment_text’, ‘lyte_parse’, 4);
    I am more of a trial and error quasi-programmer so I still would value your insight.
    Thanks!

    Reply
  39. Hi! I am trying to make a switch from a plugin Smart Youtube Pro to your plugin. I have both plugins activated now, they both parse httpv:// links. Everything is working with both plugins activated. However, I wyould like to deactivate the Smart Youtube Pro Plugin and use only yours. When I do that, video on the backend disappear – so only the httpv://www.youtube.com/xxxxxx links are seen. On the frontend everything remains, everything is working.
    So my question is: does your plugin parse the httpv:// links only on the frontend?
    We need to see embedded videos also in the backend comment section of the WordPress.
    Thanks!

    Reply
  40. Thank you for a plugin that works (still works) on my older WP 3.1.2.
    It’s an issue with my hosting company dragging their feet upgrading the servers so I can upgrade my WordPress.
    That said, I have WP LYouTube Lyte v 1.5.
    The one thing I’d love to get a handle on is the height/width.
    I can embed the video, and I can get the size to be the width of my main column in WordPress, but I’m only able to do this with #stepSize+3. The problem is it’s choosing a 4:3 player for 16:9 video. This creates black bands top and bottom that are especially wasteful when there are several videos on a page.
    I searched this page for information on adjusting/specifying size.
    I read through the dedicated support forum, but can’t post there yet because I’m waiting to reset my password. I haven’t found a way to control the height.
    https://wordpress.org/support/plugin/wp-youtube-lyte
    I tried adjusting the player_sizes.inc.php so that $pDefault=5;
    But that didn’t help either.
    So I’m a at a bit of a loss as to how I can get the right width and the proper height for the embedded videos. But I’ve been looking and trying.
    Here’s the page with multiple videos embedded.
    http://blog.ieba.com/kpost/
    Any help you can offer would be appreciated.

    Reply
    • Morning Anthony; The only way you can solve this is by telling WP YouTube Lyte to use the 16:9 player instead. There’s no way to do this on a per-video basis.

      Reply
      • That’s what I thought I was doing when I was trying to set the player_sizes.inc.php so that $pDefault=5;
        and #5 is $pSize[5][‘t’]=__(“Larger 16:9 player”,”wp-youtube-lyte”);
        I tried #3 initially, but that didn’t work either.

        Reply
      • Because on the Plugins page there’s only “Deactivate” and “Edit”
        When I go to Edit, I can only edit the html of the 15 files that make up the plugin:
        Plugin Files
        wp-youtube-lyte/wp-youtube-lyte.php
        wp-youtube-lyte/player_sizes.inc.php
        wp-youtube-lyte/options.php
        wp-youtube-lyte/widget.php
        wp-youtube-lyte/external/jquery.zrssfeed.min.js
        wp-youtube-lyte/external/index.html
        wp-youtube-lyte/external/jquery.zrssfeed.css
        wp-youtube-lyte/external/jquery.cookie.js
        wp-youtube-lyte/external/jquery.cookie.min.js
        wp-youtube-lyte/languages/index.html
        wp-youtube-lyte/index.html
        wp-youtube-lyte/readme.txt
        wp-youtube-lyte/lyte/lyte-min.js
        wp-youtube-lyte/lyte/lyte.js
        wp-youtube-lyte/lyte/index.html
        I only have WP 3.1.2 so there may be additional functionality for newer versions of WordPress, which my provider doesn’t yet offer to me. They say they are upgrading their servers, but it’s slow and I’m waiting. So I can’t upgrade my WordPress host till I am in one of their new hosting servers. So I need to try and solve it within the limitations of WP 3.1.2, if that is indeed the reason I don’t have a Settings page.

        Reply
        • yeah, but on your WP dashboard menu, you do have “settings”, no? and in those settings, there’s a menu entry for WP YouTube Lyte. It’ll all make sense when you’ve located that (should work in WP 3.1.2 as well).
          frank

          Reply
      • I also have v 1.6.15.3 of the All In One SEO Pack which I’ve seen you mention several times, so I don’t know if there’s an incompatibility there that comes into play as well.
        (delete the other comment as it’s not in thread order, sorry about that.)

        Reply
  41. I’ve started using the plugin and it mostly works perfectly. However, I noticed that two things don’t show up – annotations in my videos, and the new “cards” feature on YouTube videos also don’t show up in the player. Any ideas?

    Reply
    • The actual parameters are hardcoded in lyte(-min).js;
      tH.innerHTML="<iframe id=\"iF_" + vid + "\" width=\"" + tH.clientWidth*2 + "\" height=\"" + aHgh + "\" src=\""+eU+"autoplay="+aP+"&controls=1&wmode=opaque&rel=0&egm=0&iv_load_policy=3&hd="+hidef+qsa+"\" frameborder=\"0\" style=\"" + aSt + "\" allowfullscreen></iframe>"
      You can either change it there or use the Lyte API to add extra parameters in there. The annotations are controlled by iv_load_policy (should be 1 to see annotations). Just checked the documentation and couldn’t find anything on “cards” though. Any pointers for that feature?

      Reply
  42. Hey!
    Many thanks for a great plugin! =)
    I have discovered an error. I have theme twenty ten and twenty twelve(yours), and Google understands that the entire post and page is updated when the youtube clip is uploaded. So it is in the Google SERP that page and posts shows when it is updated. So I get a lower position and less clicks to post and page is old. How do i solve this? I have not filled out the YouTube API key.

    Reply
  43. Here in 2021, just found your plugin, (which looks very “handy”) I like the idea of downloading thumbnails locally, and only calling “fat” player once clicked. (One other plugin downloaded the ENTIRE video locally, which would do wonders for the download bandwidth, server storage and displaying bandwidth !! Not to mention blowing the API quota out the window)
    Sure it can done with a little programming prowess (yours or mine) but a thumbnail grid might be an idea for playlists. (Not yet installed plugin yet, so no idea how it handles playlists) And also, rather play “in situ”, open the player in a lightbox. (That’s no more complex than ful width / height container – poss “display:flex” – with opacity set to 0.5, and an inner div with justify-content/align-items on a div holding the video data) Problem for me would be getting that httv link into the player code

    Reply

Leave a Reply to frank Cancel reply

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