Hello @mayhemkrew,
Thanks for reaching out!
To better understand the issue, could you please share the page link where the video is embedded? Additionally, it would be very helpful if you could provide a screenshot of how you’ve added/embedded the YouTube video in the FAQ entry.
With those details, we’ll be able to investigate the cause of the blurry or distorted thumbnail and guide you toward a solution.
Looking forward to your response.
Thank you!
The link to the FAQ is here and is under the question, How do I save the project files as a preset to be used later? There you will see the embedded YouTube video with the really distorted thumbnail. I’ve tried various embedding methods (suggestions from Gemini AI), but this one here is the one that worked the best.
Hello @mayhemkrew,
Thanks for sharing the page link with us.
Instead of inserting the direct share link, you can insert the embed code directly into the code editor. Add the following code at the code editor of a FAQ.
<iframe title="YouTube video player" src="https://www.youtube.com/embed/PUw251qSo-E?si=UTwb_RRgY-qu3IZ4" width="1045" height="590" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Let us know if it helps.
Thank you.
Thank you for your reply, @pulak00 . That was the first embed method I tried but it still gives the same blurry effect with the thumbnails, additionally it then also creates a really large white space above the video. I have updated the page so you can see. Using my previous embed code (link in previous post) removed that white “dead” space.
As a side note, if I embed the video file from the media library, it works perfectly fine. But then I am using more bandwidth from my webhost provider, so I was trying to offload this to YouTube instead.
@pulak00 Have any suggestions to the issue? Appreciate any feedback. Thank you.
Hi @mayhemkrew,
When we tried the iframe embed code, the quality of the thumbnail was improved. The same happened on our local setups as well. Could you try a different video embed code and check if the experience remains the same or different?
Look forward to your response.
Thank you.
Hello @mayhemkrew,
When the accordion item is closed, the CSS hides it with display: none. Browsers treat display: none elements as having zero dimensions (0×0), so YouTube’s embed detects that and serves a tiny/low-resolution preview thumbnail. When open, the iframe has its full 1120×630 dimensions, so YouTube serves the high-res image.
In order to avoid the issue, you can use the following code:
.spcollapse:not(.show){
display: block;
visibility: hidden;
height: 0;
overflow: hidden;
position: absolute;
}
Make sure to add the class “skip” to the iframe class.
Thank you.
This is the magic sauce right there! I added the CSS snippet and added the “skip” to the iframe and now the thumbnails are working perfectly! Thank you so much! Is this something that will be considered adding into future updates to the plugin? I foresee this issue possibly coming up again. Thanks again.
Hello @mayhemkrew,
Thanks for the confirmation. Yes, we will try to include the fix in upcoming version of the plugin.
Have a nice day!
