“close-modal” is the close button and “video-embed” is the actual video embed element. Replace with your relevant names. The code basically removes the source from the iFrame so there is nothing to play any more. Hope this helps…
This code snippet was super helpful and easy to implement. Now what I’m wondering is if there’s a way, after clicking the modal closed, you can reload the video. Would be really great if you could open the modal again and start the video again. This code seems to permanently remove the iframe.
This too worked for me. I did have to adjust a little bit because my build has multiple modals per page, each modal has a video as well so I had to get creative to be able to re-populate the correct video for each modal.
I attached a data-videosrc attribute containing the video URL to the actual button that opens each modal. This allowed me to pull the URL and populate the modal each time the button was clicked.
This implementation works for both Vimeo and Youtube
var cat = document.querySelectorAll('.sf-level-0');
var close = document.querySelectorAll('.close');
var modalTarget = document.querySelectorAll('.modalTarget');
var teamMemberModal = document.querySelectorAll('.teammember-modal');
var partnerModal = document.querySelectorAll('.partners-modal');
var overLayDiv, newClass1, newClass2, newClass3;
function disableScroll() {
document.body.style.overflow = 'hidden';
document.querySelector('html').scrollTop = window.scrollY;
}
function enableScroll() {
document.body.style.overflow = null;
}
function addEl() {
overLayDiv = document.createElement('div');
newClass1 = overLayDiv.classList.add('modal-backdrop');
newClass2 = overLayDiv.classList.add('fade');
newClass3 = overLayDiv.classList.add('show');
document.body.append(overLayDiv);
}
function removeEl() {
newClass1 = overLayDiv.classList.remove('modal-backdrop');
newClass2 = overLayDiv.classList.remove('fade');
newClass3 = overLayDiv.classList.remove('show');
}
function loopPostType(postType) {
for(let j = 0; j < postType.length; j++) {
postType[j].setAttribute("id", "modal-" + j);
}
}
loopPostType(teamMemberModal);
loopPostType(partnerModal);
for(let i = 0; i < modalTarget.length; i++) {
modalTarget[i].classList.add('modal-' + i);
let idValue = document.getElementById('modal-' + i);
let classValue = modalTarget[i].classList.value;
if(classValue = idValue.getAttribute('id')) {
modalTarget[i].addEventListener('click', function(e) {
var videoURL = this.getAttribute('data-videosrc');
e.preventDefault();
$('.popUpVid').attr('src', videoURL);
idValue.classList.remove('hidden');
disableScroll();
});
}
close.forEach(function(el) {
el.addEventListener('click', function(e) {
e.preventDefault();
$('.popUpVid').attr('src', '');
idValue.classList.add('hidden');
enableScroll();
});
});
}
Can someone take a look at my preview link to see what I’m doing wrong? I tried it a few ways and none of them seem to work. I have a close div (.click-close) that is behind the youtube container which closes the module. I just need to somehow make it so when that’s clicked, the video pauses/stops so the audio doesn’t keep going.
None of these options seeem to work. I’m a noob at this but even the exapmples on this page are broken. So I assume the whole system is janky and these are all just hacks that no longer work