Video in modal overlay doesn't stop playing when closed

I have a video which opens in a modal overlay:

https://www.claire.dental/#2 (click on the button “video anschauen”)

If I click anywhere outside the video the overlay is closed, but the video keeps on playing.

That is very nice looking website, but it was incredibly slow loading and I was waiting about 20 seconds before it appeared on a fast fibre broadband connection. Your video link button is not visible, unless you have clicked the cookie accept button, so you may want to adjust the design to allow for that.

I also had this problem with the video when checking and see this as a bug or at best undesirable, however I am not sure how best to fix it. This would be something for @Norm to look at I think. You could send in a report including the project file at https://help.blocsapp.com/knowledge-base/reporting-bugs/#bug-report-form

Thanks Flashman for your Feedback! I’m rather surprised though, that the page took so long to load. Our Google Page Speed Insights Score is 76. If I may ask, from what country are you viewing the page?

Quick update: if i use an image and launch a lightbox with a video in it, the video stops playing when the lightbox is closed. But I wan’t to launch the video with a button and unfortunately Blocs does not let me launch a lightbox from a button, only from an image.

@Norm generally speaking I would really like to see Blocs add the ability to launch a lightbox from a button! That would be great!

I am in the UK on a 76mbps connection using a Mac Pro. It’s possible there was just a temporary network issue. I just tried again and it opened quickly.

The easiest way to do this is to simply create a button image and use that to open the lightbox. When you use this option use the Alternative image option and have it open the image you want. To make a quick buttom image, just create a button in blocs and style it how you like. Use Mac’s built in screen grab utility to make an image of the button (Cmd + Shift +4). You should the delete the button and replace it with the button image.

Tip: Create a custom class for the button image so that you can size it correctly. If you don’t do this, the image will stretch to the width of the underlying column.

Regarding the original question, maybe also check this previous post:

Normally you can add a small script to the page that will stop the video when the modal closes.
And at a guess, I would image that Blocs already does this when the video is played via lightbox, which would explain this…

Example script…

https://codepen.io/Sp00ky/pen/PwLNbm

or check out the post reference above by @pruthe

1 Like

So after lots of trial and error I got the video to stop playing when the modal is closed: https://vmedia.de/video-modal

Thanks @Malachiman for the link to the script! :kissing_heart:

If someone else needs this I’ll try and write a step by step here later …

One of the things I discovered was that if I attach an ID to the video bric in blocs, the ID is added to the div tag and not to the video tag as expected. See screenshot: