Javascript/jQuery video Pop-up
<p>I made a video pop-up window using Javascript &amp; jQuery, it works perfectly and the design needs a little working but its fine, as it is just a scratch work...</p>

<p>the only problem I'm having is that when I click the close button, the video is meant to stop, however it keeps going in the background. Here is the code.</p>

<p>HTML:</p>

<pre><code>    &lt;body&gt;
&lt;div id="play"&gt;
&lt;button&gt;Play Video&lt;/button&gt;

&lt;img src="1.jpg" /&gt;
&lt;img src="2.jpg" /&gt;
&lt;img src="3.jpg" /&gt;
&lt;img src="4.jpg" /&gt;
&lt;/div&gt;

&lt;div id="vid"&gt;
&lt;iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"&gt;&lt;/iframe&gt;
&lt;a href="#"&gt;&lt;h1 id="close"&gt;X&lt;/h1&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#video{
position: absolute;
top: 200px;
bottom: 400px;
left: 400px;
right: 400px;
display: none;
}
#close{
font-family: arial;
color: black;
position: absolute;
top: 100px;
left: 250px;
display: none
}
</code></pre>

<p>Javascript/jQuery:</p>

<pre><code>$(document).ready(function(){
$('#play').click(function(){
$('#video').css('display', 'block');
$('#video').css('position', 'fixed');
$('#close').css('position', 'fixed');
$('#close').css('display', 'block');
$('#play').css('opacity', '0.5');
});
});

$(document).ready(function(){
$('#close').click(function(){
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});
</code></pre>