2

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

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.

HTML:

    <body>
<div id="play">
<button>Play Video</button>

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>

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

CSS:

#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
}

Javascript/jQuery:

$(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');
});
});
Khalid Almalki
  • 65
  • 1
  • 7
  • 1
    Possible duplicate of [Stop embedded youtube iframe?](http://stackoverflow.com/questions/15164942/stop-embedded-youtube-iframe) – ahmed.hoban Jan 30 '16 at 18:40

1 Answers1

3

I also face same problem before some time. The solution is simple, need to append iframe in the id=vid and blank this on close.

<div id="vid">
<span id="frame"></span>
<a href="#"><h1 id="close">X</h1></a>
</div>

$(document).ready(function(){
$('#play').click(function(){
$('#frame').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>');
$('#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(){
$('#frame').html('');
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});
Deepak Dholiyan
  • 1,774
  • 1
  • 20
  • 35