A background video is currently playing on the site. When the play icon is clicked, the video should start playing in a popup. The video should start playing continuously from the exact moment and position where it is clicked.
Check out the example here.
For instance, when the "Play" icon is clicked, the background video (set to autoplay) should start playing in the popup.
$( document ).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
}); @charset "utf-8";
/* CSS Document */
#videoContainer {
position: absolute;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
#videoContainer video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#videoContainer .position {
position: absolute;
z-index: 2;
}
#videoContainer .overlay {
position: absolute;
top: 0;
left: 0;
background: #000000;
height: 100%;
width: 100%;
opacity: 0.4;
z-index: 1;
}
#headerPopup{
width:100%;
margin:0 auto;
}
#headerPopup video{
width:100%;
margin:0 auto;
}
.mfp-close-btn-in .mfp-close {
color: #fff;
opacity: 1;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/>
<link(href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="videoContainer">
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://videos.dailymail.co.uk/video/mol/2015/10/21/404258251173707140/1024x576_404258251173707140.mp4" type="video/mp4">
</video>
<div class="container-fluid position h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<a href="#headerPopup" id="headerVideoLink" target="_blank"><img src="https://image.flaticon.com/icons/png/512/0/375.png" alt="Smiley face" height="80" width="80"></a>
</div>
</div>
</div>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<video playsinline="playsinline" autoplay="autoplay" controls="controls" muted="muted" loop="loop">
<source src="https://videos.dailymail.co.uk/video/mol/2015/10/21/404258251173707140/1024x576_404258251173707140.mp4" type="video/mp4">
</video>
</div>
</section>The video should start playing from a specific timestamp (x secs/mins) when clicked on the icon. In the Popup, it should continue playing from the same timestamp (x secs/mins).