YouTube video thumbnail blurry on first load

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

Video is at the bottom of the page.


Here is my public share link: LINK
(how to access public share link)

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.

1 Like

Ok, Thanks for letting me know you tried that.

Webflow uses embed.ly for this function inside the Youtube Element (Vimeo too).

I created an embed test directly from my embed.ly account. I created a codepen so you can see it.

The issue does not appear there to me. Check on your side.

If you donā€™t see the problem on my test, I then suggest you remove the element from the page, then replace it. Publish and test.

I noticed a console error when visiting your page. May be the issue. Letā€™s see if it persists. Let me know when I can check again.

1 Like

Thanks for looking into this for me! I will dig into that error and see if it keeps occurring.

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.

1 Like

Yes this is the same issue, on refresh they look fine on your site. Iā€™m still not sure why this is happening yet.

Iā€™ve been having the same issue.

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.

  1. Create a rich text field in the CMS collection settings.

  2. Add the video by clicking on the rich text field > click the ā€˜+ā€™ tooltip > click the video icon > paste in the video URL.

  3. On the video settings, set to full width by clicking the icon.

  4. In the collection page template, add a rich text block and link up to the rich text field from step 1 using the ā€˜inner text 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.

Let me know if this works for you or not.

2 Likes

Looks like this is not an isolated issue.
https://support.google.com/youtube/thread/8920318?hl=en

Yeah, looks like it might be a youtube thing. Hope they find that fix soon.

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.

Ahhhhhhhhh

Another recent stackoverflow thread related to this - I wasnā€™t able to get the suggested fix here to help either, but maybe someone else could find a fix based on this?
https://stackoverflow.com/questions/57080685/youtube-embed-player-thumbnails-are-pixelated-for-small-player-but-look-fine-f

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.

This codepen link seems to load just fine in HD quality.

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.

1 Like

As I just posted here:

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

<script>
$(".youriframeclass > iframe").attr('src', $(".youriframeclass > iframe").attr('src'));
</script>

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.

1 Like

Thanks locase. Iā€™m noticing that it has been working ok the last couple days without any changes. Iā€™ll keep this in mind if it appears again.

yeah itā€™s weird like that

worth checking on another machine too - I thought it was fixed until client alerted me it wasnā€™t!