Pause HTML Embeded Video on Custom Modal Close

I am having trouble pausing a video that is done through an HTML embed when I close a custom modal/popup. Currently, when the modal is closed via an interaction, the video audio continues to play in the background.

The video has to be done via HTML embed since it must be hosted in the companies DAM. I’ve searched around, and all I’ve been able to find are solutions with the Youtube/Vimeo widget or lightbox widget (which will not recognize my DAM video link.)

The staging site is not complete, but you can view the problem at jma-pdc.webflow.io. It is the first blue section, “Still Not Convinced”.

Any help or guidance in the right direction would be greatly appreciated.

I’m also having this same issue. Did you solve it?

Has anyone else out there have a solution? My client won’t have the video hosted on YouTube or Vimeo, so the video is embedded. Which means all the solutions I’ve read don’t work.

  1. Added the modal with embedded video: http://springtest.webflow.io/
  2. Click play
  3. Exit via the “close” button
  4. The sound continues playing.

Help!

These duplicate thread(s) may already have a solution for you:

https://discourse.webflow.com/search?q=stop%20video%20modal

Please try to search the forum before asking a question. Thank you!


Next steps:

  • If the answers from the duplicate(s) don’t fully address your question, please edit your question to tell us why.
  • If you have tried one of the above but have difficulty implementing the solution, please describe in detail what you have already tried.

Hey thanks. Will check these out.

Please note: I did search and didn’t find the solution I reqired

Here is where I found the answer, but I’ll also copy the code I used below since I know how frustrating links to a bunch of links can be.

Place in the footer:

<script>
  $(document).ready(function() {
  	// set unique id to videoplayer for the Webflow video element
  	var src = $('#video-id').children('iframe').attr('src');

  	// when object with class open-popup is clicked...
  	$('.open-popup').click(function(e) {
  		e.preventDefault();
  		// change the src value of the video
  		$('#video-id').children('iframe').attr('src', src);
  		$('.popup-bg').fadeIn();
  	});

  	// when object with class close-popup is clicked...
  	$('.close-popup').click(function(e) {
  		e.preventDefault();
  		$('#video-id').children('iframe').attr('src', '');
  		$('.popup-bg').fadeOut();
  	});
  });
</script>

Explanation:

  • Name your video object id whatever you want. Replace ‘#video-id’ with what you renamed that element. Leave the ‘#’ sign.
  • “popup-bg” is the class name of the root modal div.
  • “close-popup” is the class name of the close button in the modal
  • “open-popup” is the class name of the open button outside of the modal

Credit goes to @bartekkustra. I just played with what he posted until it worked for me.

2 Likes

Thanks r_rosenow - thats great. Will give this a go.
Everything I found was about Youtube, soo frustrated.

Hey just wondering if you could help at all.

I have built a custom lightbox modal using collections to populate the content.

I have used the code you suggested and it works for the first item in my collection but none of the others. Any chance you might know what I’m doing wrong??

Here is a like to my site.

https://preview.webflow.com/preview/trident-creative?preview=d7512bfe15518d3e2deabd64a19a64c1

Thanks in advance

@Adrian_Moriconi

Hi Adrian!, i’m having the same issue… did you manage to resolve this?.

thank you.

@r_rosenow @bartekkustra

What value do I give src?

Is the src the url?
like this: .attr(‘src’, src=Built to Compete - YouTube);

or is the source the class name of the video?

@mpajunas Only adjust the ‘#video-id’, the rest remains as is.

This didn’t work for me until I changed ‘#video-id’ to ‘.video-id’. I am curious as to why.

I had a simple solution for an HTML5 Video embed on this post : Stop HTML5 Video Playing On Close Of Modal

Basically just name the button that ‘closes’ the modal to ‘close-popup’ and paste this code in the footer and see if it works?!

Worked for me amazingly!!