In my previous question I asked about how to play video in an iFrame, and got an answer : How to click from a video link and let it play in an area below?
But now I'm facing another problem, I have an iFrame and a close [ x ] button [ inspired by : http://jsfiddle.net/EFbzY/1/ ], yet I can't figure out how to activate that close button to close the iFrame, the html and script code at the end of my site looks like this, it's used to control the iFrame :
<div id="modal" tabindex="-1">
<button type="button" data-dismiss="modal" class="close" title="close">×</button>
<div class="content">
<h4 class="title"></h4>
<iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="fade" class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
<h2>×</h2>
</div>
</div>
</div>
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function(e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function(e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
closeBtn.addEventListener("click", function(e)
{
e.preventDefault();
title.textContent = '';
ytVideo.src = '';
modal.classList.toggle('is-visible');
});
</script>
The style code [ at the top of the page ] looks like this :
#modal {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
background: rgba(24, 24, 24, .6);
z-index: 999;
}
#modal .content {
width: 55%;
height: 65vh;
margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
}
#modal .content .yt-video {
display: block;
width: 100%;
height: calc(100% - 45px);
}
#modal .content .title {
box-sizing: border-box;
height: 45px;
line-height: 23px;
padding: 12px 4px;
margin: 0;
background: #007bff;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#modal .close {
position: absolute;
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 0;
font-weight: bold;
font-size: 24px;
color: #fff;
background: #666;
cursor: pointer;
transition: background .4s;
}
#modal .close:hover, #modal .close:active {
background: #ef3658;
}
#modal.is-visible {
display: flex;
}
The test site is live at : http://gatecybertech.com/test
At the upper right of the site, click on the "Videos" link will take you to the section, after you click on a video, an iFrame opens and plays the video with a [x] button on the top right corner, but it's not activated, how to fix it so it an close the iFrame and video ?
