CMS collection list - get youtube main video thumbnail by code - tuturial (Huge time saving)

“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:
CloudApp

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(&quot;https://img.youtube.com/vi/MjJDl6hA6IU/hqdefault.jpg&quot;);">
  <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:

https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Later i will add wishlist about this idea (Because again this is real “time saver”).

Hi - I’m trying to achieve this however I’m not having an success… I don’t much about coding but I’ve followed/copy/pasted the code written here, and I appear to have made a mistake of some sort, somewhere.

Would appreciate any help to identify the problem!
https://preview.webflow.com/preview/atelieraha?utm_medium=preview_link&utm_source=dashboard&utm_content=atelieraha&preview=00aa6b8b31b7b20c05dc042dd9242674&mode=preview

There are ways to get a youtube video thumbnail. One method is to get it through a URL Modification.

The YouTube thumbnail image URLs are usually located at the following path:

https://img.youtube.com/vi/” + {video_id} + “/maxresdefault.jpg”

where {video_id} is the unique identifier for a specific YouTube video.

Second method is to get it through external websites.

Like: youtube thumbnail grabber

Insert video url and your task is done!

Blog: Line How