Hey Everyone!
Thanks to @sabanna and @Waldo, we figured out a way to get a fully working dynamic lightbox for youtube and vimeo videos that stops the video when you close the modal. The stopping of the video was the biggest issue here and the reason for the custom code. The modal itself is completely done with interactions.
First, make a collection that contains your video url and thumbnail image.
Then create a new dynamic list and inside the first item, add a div block videolink with an image inside containing the thumbnail and set it to pull from the collection.
**Tip:**change the css cursor type on the div to the hand icon so people know to click it.
To create the modal:
Then, still inside the dynamic item create a modalcontainer div and set it to fixed: full with a higher index than anything on your page.
I also set the padding on the left and right to 25% to center the video instead of having it fullscreen.
Then inside that we will create the modalbackground, create another div set to absolute: full and set the background color to something like 75% black.
Inside this add a close button in the corner using absolute positioning, this doesn’t have to be a link or anything, just an image since the entire background will close the modal. You can also set the cursor to the hand as well and add any hover effects you’d like, I did 75% opacity to 100% on hover.
Then, still inside the modal container, add a video block modalvideo and set it to pull from the video URL. You then must set this to have a z index higher than the modalcontainer
I also set this to center itself vertically using the old school 50% top and transform 50% trick.
Your structure should look like this:
Add the interactions:
To the videolink item, add this interaction targeting the modal container. First Click: step one: display:block, opacity 0%. Second step, opacity 100%, 200ms transition
IMPORTANT: Make sure to check the box “limit to sibling elements”
Next we are going to close the modal by clicking anywhere in the background including where the close button is.
On the modalbackground element, apply this interaction: Display:none, opacity 0%, 200ms transition
Add the codez:
Thanks to @sabanna and @Waldo for this one. This makes sure the video stops playing when you close the modal, very important!!
<script>
$(document).ready(function() {
// config
var openvideobutton = '.videolink';
var closevideobutton = '.modalbackground';
// do not touch!
var vsrc = $('.w-video').find('iframe').attr('src');
//functions
$(openvideobutton).click(function() {
$('.w-video').find('iframe').attr('src', vsrc);
});
$(closevideobutton).click(function() {
$('.w-video').find('iframe').attr('src', '');
});
});
</script>
<script src="https://s3.amazonaws.com/youtube-vimeo-videoz/dynamic-videoz.js"></script>
So that’s it! Hope that helps you guys! I know it helped me immensely on a client project!!
-DFink (Dave)
