Streaming live at 10am (PST)

Vimeo / Embedly Dynamic List


#1

Hello all,
@samliew came up with a great way to use Webflow's native lightbox to handle video from a dynamic list. He's gotten it to work with YouTube but I'm having trouble getting this to work with Vimeo. I've looked at some available documentation to alter the code below for VImeo and the syntax appears to be correct but I'm getting a "This video does not exist" error from Vimeo.

The page that this is on is: http://claudia-kunin.webflow.io/3d-animations-copy-5

I
1) The code that gets embedded in the dynamic list via HTML embed is as follows:

<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?src=https://player.vimeo.com/video/{VIMEO}?feature=oembed&url={SRC}&image={IMG}&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=vimeo\" width=\"940\" height=\"528\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
     "thumbnailUrl": "[COLLECTION-IMAGE]",
    "width": 940,
     "height": 528
    }] }</script>
</a>

2) The code that goes in the site footer is:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
   var json = $('.w-json[data-src][data-img]');
   json.each(function() {
   ivar youtube = $(this).attr('data-src').match(/[^=]+$/);
   var src = encodeURIComponent($(this).attr('data-src'));
   var img = encodeURIComponent($(this).attr('data-img'));
   if(typeof vimeo === 'undefined') return; // not valid vimeo video
   $(this).html($(this).html().replace('{VIMEO}', vimeo[0]).replace('{SRC}', src).replace('{IMG}', img));
});
$('.w-lightbox').webflowLightBox();
});
</script>