Issue with webpage section

[David_Di_Pasquale]

Hello, really nice interface and easy way to make my website, congratulations.

i have a little issue, my website is about my video work, and i put an interaction on a button wich makes a top bar come from above the screen to show a video. The problem is that when i click the close buttons, it closes the video BUT the audio keeps playing in the background, i dont see any place where i could put a special code for this button to stop playing the video audio when i close it. i hope you get what im trying to explain, here is the website:

dpsfilms.webflow.com

Click on DEMO REEL button and play the video, then hit the close button to see what happens.

Cheers, thank you.

[cyberdave (Dave Sloane)]

Hi @David_Di_Pasquale, in order to stop the video from playing when the modal window closes, you are going to need to a modal controlled using jquery instead of an interaction. That would be my first suggestion. The interactions will set the css to display or hide the modal window, and set opacity, but does not control the video itself, thus the need for a little jquery.

Here is a topic on creating a modal window that you open and close using a little jquery:

[Tutorial] How to create a modal/pop-up in Webflow

Here’s a quick and dirty way to create a modal in Webflow before we create our own Modal component inside Webflow. Example: http://modals.webflow.com Click here to mess with it inside Webflow. (the modal is the last invisible section.) Step 1: Design a modal Create a section in the body and give it a class “modal background”. Give it a transparent black background. Make it Position: fixed, and increase z-index. (This will make the modal stay in the same place when scrolling on the page. This…

and here is a topic that talks about stopping the video when the modal is closed:

How to Pause and Stop a Video in a Modal on Close?

Hey Webflow'ers, I have a video that appears in a modal. When you close the modal, the audio from the video is still playing. Does anyone know how to stop a video from playing after you close a modal that contains it? I've looked around stack overflow but nothing seems to work so far. Here's the custom webflow js code: <script type="text/javascript"> $(document).ready(function() { $('#modal-movie').click(function(e) { $('.modal-background-movie').fadeIn(); e.preventDefault…

If you get stuck making this, let me know and I am happy to help further.

Cheers, Dave

[David_Di_Pasquale]

Thanks, you saved my life, i will definetly try it out…

[cyberdave (Dave Sloane)]

Hi @David_Di_Pasquale, there is another option, I was taking a closer look how you have that setup, and maybe a lightbox might work? Check out a test page I made with a lightbox and your video

http://design-testing.webflow.com/lightbox-video

Would something like that work? Using the built in lightbox, the close button also stops the video. You can set the thumbnail image to whatever you want Cheers,Dave

[David_Di_Pasquale]

I will try it right now, kind of tricky for me since im pretty new with webflow, thank you very much

[cyberdave (Dave Sloane)]

Hi @David_Di_Pasquale, here is a lightbox tutorial:

Lightbox | Webflow University

Hopefully that should help Let me know A lightbox is very easy compared to building a modal. There are times you need a modal, such as if you want to put other content in the modal, in addition to the video. but if you just want to show the video, then the lightbox would work.

Cheers, Dave