Streaming live at 10am (PST)

Dynamic Video Lightbox!

samliew

1m

Hello, I’m also unsure what you mean about modifying step 3. Would it be possible to clarify? I would need to play both youtube and vimeo videos. Any input is appreciated. Thanks!

Hey there,

I would give this a shot. It works like a charm for me, and it has been suggested as a better option than the one you’re currently working though. I was stuck in the same spot you are, but when I switched to this method it solved everything. Hope it works out for you too! https://webflow.com/website/CMS-LightBox-Galleries-The-Easy-Way

@Caleb_Williamson thanks for the response. I’ve tried this one, its been able to work. I can definitely us it but is there any to have it not open a new page/tab when you click the video? It would be nice to have users stay on the page while checking out multiple videos instead of have to close the page that was open and need go back to see the others. Thanks again for your help!

@Pixel_Pleaser Make sure your link block with class name video does not have the “Open in new tab” checkbox checked. If that’s not the problem, then I’ll have to do some more research into this.

Brilliant! Thanks, that did it! I appreciate it!

@Pixel_Pleaser No problem! Good to hear!

1 Like

To autplay a youtube video, simply add autoplay=1 to the embedly src string.
ie.

<a class="w-inline-block w-lightbox" href="#">
  <img src="[COLLECTION-IMAGE]">
  <script class="w-json" type="application/json" 
          data-src="[COLLECTION-VIDEO-URL]" 
          data-img="[COLLECTION-IMAGE]">{ "items": [{
    "type": "video",
    "url": "[COLLECTION-VIDEO-URL]",
    "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?autoplay=1&src=https://www.youtube.com/embed/{YOUTUBE}?feature=oembed&url={SRC}&image={IMG}&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=youtube\" width=\"940\" height=\"528\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
    "thumbnailUrl": "[COLLECTION-IMAGE]",
    "width": 940,
    "height": 528
  }] }</script>
</a>