Pause HTML background video when popup opens

I have this video background with music and I want it to mute or disable when a video popup opens as it also has music.

HTML Background:
<section class="waypoint video-block fullscreen" data-hash="welcome" style="padding:0;">
<video autoplay="autoplay" loop="loop" poster="img/VideoHDimg.png" class="background-video">
    <source type="video/mp4" src="video/VideoHD.mp4">
    <source type="video/ogm" src="video/family_1.ogm">
</video>

HTML Popop:
<div id="video-popup" class="mfp-hide self-video-popup"><div class="some-element">
<video muted="muted" loop="loop" controls poster="img/popupvideo.jpg">
    <source type="video/mp4" src="video/popupvideo.mp4">
    <source type="video/ogm" src="video/family_1.ogm">
</video>

CSS:

 .alt-bg {
box-sizing: content-box;
-moz-box-sizing: content-box;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
margin-bottom: 40px;
margin-right: 0;
margin-top: 40px;
border-color: #E4E4E4;
padding: 30px 0;
}

.video-block {
background-position: center center;
background-repeat: repeat;
overflow: hidden;
position: relative;
width: 100%;
float:none;
text-align:center;
margin:0;
}

.mfp-inline-holder .mfp-content {
line-height: 0;
max-width: 900px;
width: 100%;
}

.self-video-popup {
height: 0;
overflow: hidden;
padding-top: 56.25%;
width: 100%;
}

.self-video-popup .some-element {
background: none repeat scroll 0 0 black;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.self-video-popup .some-element video {
width:100%; 
height:100%;
}

.text-inner {
position:relative; 
z-index:4;
}
 .background-video {
width:100%;
height:760px;
position:absolute;
top:0;
left:0;
}

JS

var MPopup = {
init: function () {
    MPopup.video('a.play.video');
    MPopup.self_hosted_video('a.play.video.self-hosted');
    MPopup.image('.portfolioContainer');
},
video: function (idName) {
    jQuery(idName).magnificPopup({
        mainClass: 'mfp-fade',
        items: {
            src: jQuery(idName).attr('href')
        },
        iframe: {
            markup: '<div class="mfp-iframe-scaler">' +
                    '<iframe class="mfp-iframe" frameborder="0"           allowfullscreen></iframe>' +
                    '<div class="mfp-close"></div>' +
                    '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
        },
        type: 'iframe'
    });
},
self_hosted_video: function (idName) {
    jQuery(idName).magnificPopup({
        mainClass: 'mfp-fade',
        type: 'inline'
    });
},
image: function (idName) {
    jQuery(idName).magnificPopup({
        mainClass: 'mfp-fade',
        delegate: 'article:not(".ajaxed") a:visible',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        },
        callbacks: {
            buildControls: function () {
                if (jQuery.magnificPopup.instance.items.length > 1)
                    this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
            },
            open: function () {
                jQuery('.mfp-description').append(this.currItem.el.data('title'));
            },
            change: function () {
                var mfp = jQuery.magnificPopup.instance;
                var container = jQuery(mfp.container);

                if (mfp.index >= mfp.items.length - 1)
                    container.addClass('mfp-last');
                else
                    container.removeClass('mfp-last');
                if (mfp.index == 0)
                    container.addClass('mfp-first');
                else
                    container.removeClass('mfp-first');
            },
            afterChange: function () {
                jQuery('.mfp-description').empty().append(this.currItem.el.data('title'));
            }
        },
        image: {
            verticalFit: true,
            markup: '<div class="mfp-figure   mfp-with-anim">' +
                    '<div class="mfp-img"></div>' +
                    '<div class="mfp-bottom-bar">' +
                    '<div class="mfp-description"></div>' +
                    '<div class="mfp-close"></div>' +
                    '</div>' +
                    '</div>'
        },
        type: 'image',
        closeOnContentClick: false,
        midClick: true,
    });

}
}

I want the background video to mute or to stop playing when the video popup opens and comes to normal when video popup close. Please HELP.

Thank you.

As I understand it, a child pop-up cannot directly manipulate or control a parent page. However, I think you might be able to send a message from the child pop-up to the parent page, which can then control itself.

So… this would require the control that creates and opens the pop-up window to pause the background video, then wait for a message from the closing pop-up child that the pop-up is closed and the parent can resume the background video.

HTH,

:slight_smile:

Thank you for quick response, I am not good at JS so this is why I can’t figure out how to do it, the developer from whom I purchased this template is asking for additional money which obviously I don’t want to pay when I purchased the template.

I was told to include this code in JS when the popup opens but I tried adding it which either stops the background video completely or the page doesn’t load.

Code:
var mediaElement = document.querySelector(".background-video"); mediaElement.pause();

So is it possible if someone can tell me where exactly to add this code to make it work.

Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.