I have created a demo of a video in my footer that uses external CSS files and works perfectly.
However, when I added it to the project, everything works except for closing the video. After clicking the play button in the footer, a modal appears on the screen but does not fill the entire screen.
And when I try to close it, the modal closes but the iframe remains visible.
Below is the code snippet:
HTML
<div class="homepage-video">
<div class="hv-container">
<div class="hv-player">
<h3>BruxZir Hammer Test</h3>
<p>Watch how it holds up to a hammer</p>
<a href='#' onclick='overlay()'>
<span class="hv-play">
<i class="fa fa-play"></i>
</span>
</a>
</div>
</div>
</div>
<div id="overlay">
<div class="featured-video">
<a href='#' onclick='overlay()'>
<i class="fa fa-times-circle-o"></i>
</a>
<iframe src="//player.vimeo.com/video/88944978" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
CSS
.homepage-video { background-color: black; }
.homepage-video { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/lab-interior.jpg'); }
.homepage-video {
background-position: center -60px;
background-repeat: no-repeat;
}
.homepage-video { background-size: cover; }
.hv-container {
background-color: rgba(30,30,4, 0.6);
min-height: 240px;
position: relative;
}
.hv-player {
width: 320px;
max-width: 100%;
margin: 0 auto;
position: absolute;
top: 30px;
left:0; right: 0;
padding-top: 20px;
text-align:center;
}
.hv-player, .hv-player h3, .hv-play { color: #f4f3f3; }
.hv-play {
border: 3px solid #fff;
cursor:pointer;
padding: 4px 18px;
border-radius: 13px;
font-size: 30px
}
/* reset for IE*/
body { height:100%; margin:0; padding:0; }
/* code */
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#overlay { background-color: #222;}
/* must have these resets */
html, body{ height: 100%; padding: 0; margin: 0;}
/* code begins*/
.featured-video { height: 100%; width: 100%; }
.featured-video iframe {
height: 100%;
width: 100%;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
}
#overlay i {
color: #999;
font-size: 48px;
margin: 10px;
}
JS
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}