<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
/*Video POPUP CSS*/
.playBtn {
width: 100px;
height: 100px;
background-size: 100%;
display: block;
border: 10px red;
position: absolute;
left: calc(50% - 50px);
z-index: 1;
bottom: 40%;
background-repeat: no-repeat;
}
.modal-video {
background-color: rgba(0, 0, 0, 0.9) !important;
}
.modal-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000000;
cursor: pointer;
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-name: modal-video;
animation-name: modal-video;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
.modal-video {
display: none;
}
.modal-video-body {
max-width: 940px;
width: 100%;
height: 100%;
margin: 0 auto;
display: table;
}
.modal-video-inner {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.modal-video-movie-wrap {
width: 100%;
height: 0;
position: relative;
padding-bottom: 56.25%;
background-color: #000;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-name: modal-video-inner;
animation-name: modal-video-inner;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
-o-transition: transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
max-width: 95%;
margin: 0 auto;
}
.modal-video-close-btn {
position: absolute;
z-index: 2;
top: -35px;
right: 0px;
display: inline-block;
width: 35px;
height: 35px;
overflow: hidden;
border: none;
background: transparent;
}
.modal-video-movie-wrap video,
.modal-video-movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
$(document).ready(function(){
/* Video Popup for youtube video */
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
})
function onYouTubeIframeAPIReady() {
// vid_id = $('.modal-video-movie-wrap').attr('data-videoid');
player = new YT.Player('player', {
height: '230',
width: '100%',
playerVars: { 'autoplay': 0, 'controls': 0 },
// videoId: vid_id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
$(document).ready(function(){
// Play Icon shwo video Popup stop and pause
var sameVid_id = $(".modal-video-movie-wrap").attr('data-videoid');
$('.playBtn, .youtube-video_btn').click(function(e){
e.preventDefault();
$('.playBtn, .youtube-video_btn').removeClass('active');
$(this).addClass('active');
vid_id = $(this).attr('data-videoid');
if(vid_id != sameVid_id) {
$(".modal-video-movie-wrap").attr('data-videoid',vid_id);
player.loadVideoById(vid_id, 5, "large")
} else {
console.log(sameVid_id);
$(".modal-video-movie-wrap").attr('data-videoid',sameVid_id);
}
$('.modal-video').show();
player.playVideo();
sameVid_id = vid_id;
});
$('.modal-video-close-btn, .modal-video, #player.iframe').click(function(e){
// Youtube video Pause
player.pauseVideo();
$('.modal-video').hide();
});
});
</script>
<a class="youtube-video_btn" data-videoid="CQP4J6S3w14">Video 1</a>
<a class="youtube-video_btn" data-videoid="l-iEI4NrRcU">Video 2</a>
<a class="youtube-video_btn" data-videoid="TtjPwH8hSEg">Video 3</a>
<div class="modal-video" tabindex="-1" role="dialog" aria-label="You just openned the modal video" id="JR1DT8LJGUV5Y">
<div class="modal-video-body">
<div class="modal-video-inner">
<div class="modal-video-movie-wrap" style="padding-bottom:56.25%">
<button class="modal-video-close-btn js-modal-video-dismiss-btn" aria-label="Close the modal by clicking here"></button>
<div id="player"></div>
<!-- <video width="460" data-video="true" controls="true" height="230" loop="loop" class="popupVideo" poster="/wp-content/uploads/2018/11/slider-1-min.jpg"><source src="<?php // the_sub_field('video_popup_file'); ?>" type="video/mp4"></video> -->
</div>
</div>
</div>
</div>
