“The problem”
When you create video blog - 99% of the times you want the youtube image thumbnail
to be your collection list image thumbnail
- but its very exhausting each time to get this image manually (By auto generators like YouTube thumbnail grabber | / Boing Boing or manually change the id for working youtube link).
The solution
Ben from webflow team - explain my idea/code:
My code convert this:
<section class="box">
<div class="frame" data-src="https://www.youtube.com/embed/MjJDl6hA6IU">
video 1
</div>
</section>
To background image:
<section class="box" style="background-image: url("https://img.youtube.com/vi/MjJDl6hA6IU/hqdefault.jpg");">
<div class="frame" data-src="https://www.youtube.com/embed/MjJDl6hA6IU">
video 1
</div>
</section>
My codepen
https://codepen.io/ezra_siton/pen/GzLYax
All you need to do on webflow is to hide the data-src and bind this data inside your collection.
Than:
- Option 1 - use the thumbnail as background image (My codepen)
- Option 2 - use the thumbnail as real “image” (very close to my code)
I use /hqdefault.jpg
- more sizes of youtube thumbnails her:
Later i will add wishlist about this idea (Because again this is real “time saver”).