For some reason using the video component and cms my YouTube video thumbnail is always super pixelated on first load of the site. On browser refresh it seems to fix with the HD thumbnail. Project is here: Uppermostdesign.co
Why not use a custom video thumbnail versus the auto generated one?
Your custom thumbnail image should be as large as possible. It will be used as the preview image in the embedded player. We recommend your custom thumbnails:
Have a resolution of 1280x720 (with minimum width of 640 pixels).
Be uploaded in image formats such as JPG, GIF, or PNG.
Remain under the 2MB limit.
Try to use a 16:9 aspect ratio as it’s the most used in YouTube players and previews.
Hi, this is already done. If you refresh the page it loads the HD thumbnail. This is what I’m trying to figure out. Why it’s blurry on first load and high res on refresh.
I have a similar issue on a test site I am working on in Webflow. For pages that have 2 YouTube video embeds on the same URL, the first video thumbnail is crisp and fine. The second one on the page is always blurry. Examples:
This seems to be an issue in Chrome only. Not Safari. Thanks.
Seems the only fix I’ve been able to figure out is to embed the video using a rich text block, instead of the ‘video’ widget. This then loads in the video preview/thumbnail un-pixelated.
Here’s a step-by-step on what I did.
Create a rich text field in the CMS collection settings.
The video embed widget used to work for me and others without the pixelation, so it seems like it’s a recent issue. But this solution does the trick for now, until it is fixed.
I’ve been having this same issue. Driving me bonkers. I thought I’d fixed it by converting PNGs to JPGs, tested fine at first. 40 odd JPG uploads later and turns out still they’re not displaying correctly.
Very hard to test for as it appears to be working for a while, then it’ll revert to blurry thumbs.
The rich text fix mentioned above by Louie hasn’t worked for me.
I think for me, it could be related to the video being displayed via modal . The video is set to display:none and that’s affecting the way it loads on Youtube’s end. (However, it looks like you others, above aren’t using modals)
Similar to this S.O. post: https://stackoverflow.com/questions/56748689/youtube-embedded-thumbnail-blurry-in-bootstrap-modal
I’ve tried the position:absolute; left:40000px; fix mentioned there, but to no avail.
I was hoping those of you that experienced issues would look at this page and let me know if it was affected as well. It is nothing more than a straight up embed.ly youtube embed. I am trying to isolate this issue and need participation.
That displays fine for me - but then so do the thumbnails on the pages that krevans and dreweastmead posted above.
So whatever the issue is, it’s not consistently reproducible… seems to display differently for different users.
This fix posted on the Google support thread seems to have helped for me. I put this bit of JS in the “head” area of custom code (switching the .youriframeclass text for your the class name of your Youtube embed).
All seems to be working smoothy for the moment, but as I mentioned previously it’s a hard problem to test for because it will reoccur randomly again, once you think you’ve solved it.