Dynamic Video Lightbox!

Community resources Webflow Tips
46

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!

47

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

48

@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!

49

@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.

50

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

51

@Pixel_Pleaser No problem! Good to hear!

1 Like
52

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>
2 Likes
53

THANK YOU FOR THIS!!! It works :slight_smile:
In case anyone is also looking for this feature, the video link needs to be a text (so create a text field if you don’t have one, with just the video link - not a “video link” field though. has to be text). I also noticed the youtube link can’t be the shortened youtu.be one - it has to be the full YouTube(specific code for that video here) and can’t include the channel name or anything else.

Hope this helps!