Pause HTML Embeded Video on Custom Modal Close

Design help Custom code
5

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