Improving quality of the "Youtube" buttons

a better version of the buttons would be great, absolutely! all images are in on sprite, so work would need to be done that (cfr. https://blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lytesprite.png)

I might even be able to squeeze it in the next major version (1.6.0, cfr. this thread) which I’m releasing soon.

thanks for the offer!
frank

Cool, I’ll get to work on that, I should be able to finish it this week. Just curious, but were the current sprites based on an older Youtube design?

Just curious, but were the current sprites based on an older Youtube design?

I think they were, yes.

Spent some time working on this. Since some elements of the player are rendered by the browser itself, I ended up redrawing them in an image editor. I have to do some more testing but it’s almost indistinguishable from the real thing now. I think I’ll have the new file ready tomorrow. A few additional notes (all just nitpicking really, and I might be willing to see if I can code some of these things myself):

• I used to just post the url in the post and let Youtube handle the embedding. This displays the video without the video controls (only the title, and the play button). This seems to be how it’s displayed on most, but not all, websites I visit. Youtube Lyte does seem to always display the video controls. I guess can just display: none it, but I’m not sure if there’s an option to disable the controls?
• The link at the opt of the video has the text color set to #CCC, and only turns into #FFF over it. In Youtube Lyte it’s always #FFF. In standard Youtube embeds, this link also redirects you to the Youtube.
• My blog posts are 625 pixels wide, and when I use the 640 pixels video it does get scaled correctly, but the preview image is an upscale from the 480px video. In standard Youtube embeds, it instead downscales the image from the 680px one. None of the methods is ideal, but I’d still prefer to use the higher quality images since the upscale is rather blurry.

* there’s no explicit option not to show the controls, so display:none; indeed is the correct approach
* changing the link to #CCC; applied that to the to-be 1.6.0 code
* you can force lyte to use high-quality thumbnails on a per-vid basis by appending hqThumb=1 to the URL or you can use the API to force hqthumbs for all videos (there’s example code in lyte_helper.php_example for that)

looking forward to the new sprite ??

Here’s the updated sprite. Let me know if it works or if any adjustments need to be made. I ran the PNG through just about all PNG compression utilities available so it’s already optimized. The buttons aren’t exactly the same size, so the position may be slightly altered compared to the original. Also, I ended up saving the transparency of the inactive play button into the image itself. I assume you set the opacity for that button through CSS at the moment, but that would also make the center triangle transparent, which isn’t the case on the actual Youtube videos. So I think the opacity can be set to 1 now.

Regarding my comment about the link: you probably knew what I was trying to say but just in case, I meant to say that the link turns to #FFF color when you hover over it. Thanks for the other answers, I’ll look into the helper file.

doesn’t look half-bad. looks really good, actually! one small thing; I don’t see the inactive play-button’s transparency?

anyway, you can see the result (title color, new images and slightly adapted play-button width & height) here;

https://blog.futtta.be/2015/03/26/music-from-our-tube-bela-lugosis-dead-by-lots-of-guys/

Let me know what you think ??

Thanks for the update. I think it’s very difficult to notice the difference between the actual player and the lyte placeholder now, so that’s good! The transparency for the inactive button is there, but it’s just not very noticeable on your example. On your other videos, you can see the button is actually transparent. The only difference I’m noticing right now is the top title bar background which is set to rgba(0, 0, 0, 0.5), but Youtube uses rgba(0, 0, 0, 0.8). The height of the title bar is also 30px on Youtube, but that’s nitpicking again ??

Ok, adapted the top title bar color as well and uploaded the code to svn trunk. If you (re-)download the pre-1.6.0 version, you’ll be able to enjoy this as well ??

thanks a lot for your help, greatly appreciated! i’ll add your name to the changelog, any specific URL you’d like me to link to?

frank

I tried the pre-1.6.0 version, it looks just about perfect now. Glad I could help! Just adding my username to the changelog is enough, thanks!

Confirmed Draikin; as of now people are now downloading your great lytesprite. Thanks again!

frank

Thank you for making the plugin! ??

Looks like YT is experimenting with a new embedded player UI (I was too late to take a screenshot). Would you be interested in providing an update when this becomes generally available lytesprite Draikin? ??

frank

Do you mean the transparent UI? I’ve seen that recently, it looks really nice. I’m certainly willing to look into providing an update for the lytesprite when Youtube makes the switch.

Do you mean the transparent UI? I’ve seen that recently, it looks really nice.

indeed!

I’m certainly willing to look into providing an update for the lytesprite when Youtube makes the switch.

great, looking forward to that!