Feature request – load high res thumbnails

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)?

did some tests, but apparently a lot of vids don’t have maxresdefault images available (e.g. https://i.ytimg.com/vi/LEmkmCXhwR0/maxresdefault.jpg or https://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.

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: https://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.

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?

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.

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

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.

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 https://blog.futtta.be/2013/03/05/how-to-have-normal-youtube-links-handled-by-wp-youtube-lyte/.

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.

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)?

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?

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!

sorry for the mixUp, glad you like LYTE ??

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?

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;}";
}