Video in modal overlay doesn't stop playing when closed

I have a video which opens in a modal overlay:

Die Software für die Zahnarztpraxis von Zahnärzten entwickelt (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…

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 @PeteSharp 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:

I have just noticed this happens to all my videos that are in lightboxes. When I close the lightbox (w/out stopping the video first), the video audio keep playing. How can I fix this in the lightbox?

That happens with an audio file too.
When you use the audio player bric in a modal the audio also doesn’t stop when closing the modal.
Not good.

Hi, you can fix it. You have to add some external code though after publishing and also change some code. I put a screenshot in a previous post above.

I was able to find some javascript that stopped this. Took awhile to find. But yeah, seems to be a common phenomenon… and not just in Blocs. In general with video files.

And using my browser at work, the audio was playing and I fixed it with the .js code. HOWEVER, now that i’m working from home today, I have an earlier Blocs file with no .js code added and it stops just fine without it. aghhh… must be browsers/browser versions? That’s all I can think of that would cause the discrepancy in audio continuing to play or not. So bizarre.

1 Like

$(‘body’).on(‘hidden.bs.modal’, ‘.modal’, function () {
$(‘video’).trigger(‘pause’);
});

I like to bring that topic up again, because there’s no solution for that problem so far.
I use the Player bric from @Lucas. @Lucas didn’t answer my PM.
Somebody here who have found a way to resolve this annoying problem?

I’m pretty sure I implemented a solution for this when using the Blocs modal.

2 Likes

Good to know, but where is it.?
As I said I’m using the “Player” from Lucas.
I know that the normal video bric that comes with Blocs is doing this.
But Lucas’ bric doesn’t.

If you have time check it out here:

and click on “Infos & Sound”.

Hi @Bootsie

Just use the regular modal bric, and put the video bric inside it. It works great!

Hi Eldar,
I use the normal modal bric.
The “Player” bric by Lucas stays inside the modal.
When I close that modal the audio keeps playing.
Did you check the link I posted?

Unless Lucas adds an event listener for a modal closing, the only option would be to code a listener yourself. jPlayer which I think its based on has the option you need in the documentation.