How do I stop my modal video from playing in the background?

Occasional Contributor

Hello! 

 

I have four modal windows on this page... http://info.ipsoft.com/meet-amelia-bank-of-americas-newest-customer-service-agent?hs_preview=nqGykUF...

 

...that are linked to four Vimeo videos. The issue I'm noticing is that if you start to play a video and close it before it finishes the video is still playing in the background, with the modal window closed. 

 

I've researched some methods of stopping the video but can't seem to get any of my changes to apply. I would love to know what I'm doing wrong here. 

 

Any help on this is greatly appreciated. Thanks in advance!

Reply
0 Upvotes
5 Replies 5
Regular Contributor

Hi

 

With a lot of modal window javascript solutions, when the window closes, the HTML is actually removed from the page, this in essence removes the video itself so it no longer plays. The solution you are using sadly doesn't seem to do this so it just carries on playing even after you close it.


How have you implemented the modal windows? Are you using a JavaScript plugin? I would perhaps look at trying a different plugin to see if you have better results.

 

Alternatively, you could use the Vimeo JavaSript API to try and trigger the video to stop when you close the modal window, but this could get complicated quite quickly.

 

All the best

David

Highlighted
Occasional Contributor

Hi David and thanks for the response. The modal windows are implemented on the page. Unsure the exact "solution" I'm using outside of applying javascript to accomplish these modal windows. Not using a js plugin either, just straight up js on the page. Can you suggest a plugin by chance?

 

Don't know why the videos would continue to play in the background. Doesn't really make sense to me. 

 

 

Reply
0 Upvotes
Regular Contributor

Hi

 

Once the video has been added to the page, and play has been hit, regardless of if the video is visible or not, its still there and doing its thing. Its a bit like closing the kitchen door and expecting the washing machine to turn off Smiley Wink

 

Unfortunately off the top of my head I couldn't recommend one, we have a bespoke solution here that we use but its not something I can share. From a quick google, I found a list here of top modal plugins:

 

https://www.sitepoint.com/14-jquery-modal-dialog-boxes/

 

Lots of jQuery plugins allow you to pass a callback function to it when certain events happen. If you find one with like this, then even if it doesn't remove your video automatically, you may be able to do it with a callback.

 

I am afraid it would be a bit of a case of trial and error though to find one that works for you.

 

Sorry I can't be of more help.

 

All the best

David

Occasional Contributor

Thanks for the help David. I'm going to work through some of these options and see what's happening. 

 

Thanks again for the assistance!

Reply
0 Upvotes
Occasional Contributor

Hey David! 

 

I actually got some help internally on this but for whatever reason I can't seem to get the changes to apply on the live page in HubSpot. The test our developers sent me worked fine but once the code was inserted on the page I'm still having the same issue. They seemed to use the Vimeo API here. 

 

You can test it out here on the first "Watch Now." I would love to know why this doesn't seem to function in HubSpot for whatever reason.  

 

 

 

 

Reply
0 Upvotes