Streaming live at 10am (PST)

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:

My code convert this:

<section class="box">
  <div class="frame" data-src="">
    video 1

To background image:

<section class="box" style="background-image: url(&quot;;);">
  <div class="frame" data-src="">
    video 1

My codepen

All you need to do on webflow is to hide the data-src and bind this data inside your collection.


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

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!