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.
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.
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.
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.
Create a rich text field in the CMS collection settings.
Add the video by clicking on the rich text field > click the ā+ā tooltip > click the video icon > paste in the video URL.
On the video settings, set to full width by clicking the icon.
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.
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.
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.
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!