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.
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.
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??