WordPress.org

Ready to get started?Download WordPress

Forums

WP YouTube Lyte
Feature request - load high res thumbnails (18 posts)

  1. zirconx
    Member
    Posted 1 year ago #

    I really like this plugin, I have been using it for a while. One of the first things I did was 'hack' it to load high resolution thumbnails. That is, use maxresdefault.jpg instead of 0.jpg. Then a few weeks ago I absent mindedly updated the plugin, and overwrote my changes. So tonight I spent some time trying to remember how to do that again and got it figured out.

    But I thought this would make a great (and easy to implement) feature. Maybe a checkbox to turn on high res thumbnails? The page looks sooo much better with them.

    http://wordpress.org/extend/plugins/wp-youtube-lyte/

  2. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    I like to avoid adding more options, but it might make sense to switch to maxresdefault.jpg starting from a certain size, e.g. if width is more then 640 (as maxresdefault.jpg has a width of 1280 and weighs considerably more then hqdefault.jpg)?

  3. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    did some tests, but apparently a lot of vids don't have maxresdefault images available (e.g. http://i.ytimg.com/vi/LEmkmCXhwR0/maxresdefault.jpg or http://i.ytimg.com/vi/rF9xO2Tpwzs/maxresdefault.jpg), so I'm afraid it doesn't make sense to enable maxresdefault.jpg at this point in time.

  4. zirconx
    Member
    Posted 1 year ago #

    futtta, thanks for looking into this. What about doing something like this?

    img src=".../maxresdefault.jpg" onerror="this.src='.../0.jpg'

    I wrote about onerror on my blog a few weeks ago: http://www.stillnetstudios.com/onerror-img-image-tag/

    YouTube is returning a 404 code when the image doesn't exist so I think this will work.

  5. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    Interesting blogpost zirconx! But specifically for the WP YouTube Lyte use case the situation is a little more complicated; in the upcoming 1.2.0 the thumbnail is defined in the data-src of the pl div, with lyte(-min).js setting that as background-image of that div only after the load/ domcontentloaded event and I prefer not to include more trickery then needed in there.

    What you could do (if you're not afraid of a little creative hacking) is write a small javascript-thingie (seperate from wp youtube lyte, to avoid getting overwritten when updating) that looks for lyte-divs and in there change the bgimage for the pL-div from 0.jpg into maxresdefault.jpg?

  6. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    I'm working on a change that might interest you zirconx;

    What I could do for a next release, is support something like
    httpv://www.youtube.com/watch?v=_SQkWbRublY#hqthumb=1
    and in that case load the maxresdefault.jpg.

    This will be available tomorrow in the development version (and will become 1.2.3 at a later stage), I'll update here with correct link if you want to try this out.

  7. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    You can find the development-version with support for #hqThumb=1 here.

  8. zirconx
    Member
    Posted 1 year ago #

    Hi Frank. I installed the dev version, and I added #hqThumb=1 to one of my videos but the thumbnail wasn't high res for some reason. In the process of trying the new plugin I lost all my custom changes so had to spend a half hour figuring that out again, ugh! Totally my fault though.

    Your proposed change, adding #hqThumb on the URL, would require me to go back and edit all my old posts. It also adds an extra step when adding new videos. I still think a setting in the UI or even in a config file would be a better approach.

  9. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    Did you see an image, but was is low-res? Or did you get the dreaded grey-televisoin-icon which implies there is no maxresdefault.jpg?

    Adding it as an option might come at a later stage Zirconx.

    You could, in the mean time however, create a little helper plugin (or add some code to your theme's functions.php) to force "#hqThumb=1" on all httpv-links; in the_content look for all url's with httpv (or httpa) -links and for each of those add "#hqThumb=1", a bit like the example code in http://blog.futtta.be/2013/03/05/how-to-have-normal-youtube-links-handled-by-wp-youtube-lyte/.

  10. zirconx
    Member
    Posted 1 year ago #

    I was getting the low-res thumbnail.

    All my videos are in 1080p, so I know there will always be a maxresdefault.jpg, so I changed the code on my site to always reference that.

    I still think there must be some way to autodetect if there is a maxresdefault, and if so use it, else fall back to the low res. Fetch the maxresdefault, then use JavaScript to see if it worked or not, then load the low-res if necessary.

  11. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    Autodetection would be too cumbersome, especially since the first request will yield either a larger image (extra kb) or a 404, causing a second request for the normal thumbnail. That goes against one of the primary goals of WP YouTube Lyte; the best performance possible.

    To avoid updates overwrite your changes, you'd better add some code to functions.php (or in a standalone helper plugin) to automatically add #hqThumb=1 to each httpv/a-url.

    But most importantly; if you're running the dev-version and with the hqThumb argument still did not see the maxresdefault, then you might have found a bug. Can you provide me the exact link you used (here of via futtta-at-gmail-dot-com)?

  12. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    update: I'm in the process of adding filter hooks to WP YouTube Lyte to help people like you to tweak functionality without having to change the plugins code itself.

    I've currently got the following as candidates;

    • lyte_content_preparse: e.g. to force normal youtube URL's to be parsed as well
    • lyte_match_preparse_fragment: to change options e.g. to always have showinfo=0 or always have hqThumb=1
    • lyte_match_postparse_template: to change the generated lyte-div before it is being put back in the content
    • lyte_content_postparse: to change the entire the_content with all lyte-code in there before it is being handed over back to WordPress core

    Any other hooks you can think of that could ease your life?

  13. pschueller
    Member
    Posted 1 year ago #

    Hi there Futtta, love the plugin.

    #hqThumb=1 worked perfectly! Just one thing to note: it is case-sensitive, so "Thumb" must be written with a capital "T". In your first post it was written in lowercase... and because I'm quite lazy, I just copy pasted the first thing I saw. Took me a while to figure out what was wrong. :-)

    Thanks!

  14. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    sorry for the mixUp, glad you like LYTE ;-)

  15. pschueller
    Member
    Posted 1 year ago #

    Hello again.

    I just edited lyte.js to add &autohide=1 to the player. Is this something that could be done through the lyte_match_preparse_fragment hook instead?

  16. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    that depends; do you want to hide the controls in the LYTE-player (i.e. the dummy player that gets replaced by the real YT embed upon pressing play), or do you want to change the YT embed's behavior (which by default autohides the controls after a couple of seconds)?

    In case you want to hide the bottom "ctrl" in the LYTE player; right now you can add

    .ctrl{display:none;}

    in e.g. your theme's CSS.

    The next version of WP YouTube Lyte will also have a lyte_change_css filter hook to override the default CSS from within code;

    /** change css using lyte_css filter, e.g. to hide bottom control ui */
    add_filter('lyte_css',lyte_change_css,10,1);
    function lyte_change_css($lyte_css) {
    	/** you can replace the entire css here or just add some declarations overriding the default ones */
    	return $lyte_css.=" .ctrl{display:none;}";
    }
  17. pschueller
    Member
    Posted 1 year ago #

    Both actually :-)

    I've already hidden the controls from the dummy using display:none, but I wanted to modify the auto-hide on the YT player itself so that it also hides the red 'progres bar' that usually remains below the video.

  18. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    In case you guys want to be the firsts to test the new features (esp. the API), you can download the development version from http://downloads.wordpress.org/plugin/wp-youtube-lyte.zip

    Looking forward to your feedback! :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags