I'm building a small video gallery where each video has an icon. When clicked it opens up a lightbox with an embedded YouTube iframe in it. The lightbox also has an X in the upper right corner to close it. Here's a simplified version of the CSS:
.lightBox { width: 646px; height: 405px; z-index: 1001; }
#video1Box { display: none; }
.playIcon { width: 100px; height: 100px; }
#video1Icon { background-image: blah blah blah; }
#video1Icon:hover { background-image: blah blah blah 2 }
iframe { display: block; margin: 15px auto; }
.x-button { position: absolute; top: 5px; right: 5px; }
...and the html:
<div class="playIcon" id="video1Icon" onclick="document.getElementById('video1Box').style.display='block';"></div>
<div class="lightBox" id="video1Box">
<iframe width="640" height="360" src="//www.youtube.com/embed/myvideo" frameborder="0" allowfullscreen></iframe>
<div class="x-button">
<a href="javascript:void(0)" onclick="document.getElementById('video1Box').style.display='none';">X</a>
</div>
</div>
Right now almost everything works perfectly. You click the icon, the lightbox pops up, the video displays correctly within it, the video plays fine, and when you click the X the lightbox disappears. Only problem is that the sound for the video keeps playing.
I tried giving the iframe its own ID and then adding a getElementById call to the x-button onclick event to change that Id's display attribute to hidden and none, but neither worked.
I'm pretty novice with javascript, but is there a function I can add to the onclick event for my x button that will pause or stop the video, or like "reset" the iframe, or something? It would also be a huge bonus to be able to autoplay the video when the icon is initially clicked, but that's not absolutely necessary at the moment.
