Streaming live at 10am (PST)

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

#1

“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

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

Refrence CMS in custom div attrbute