0

I added some javascript that triggers a pop-up with a YouTube video as shown in the image.

enter image description here

The code is controlled by a "a href" as shown below to trigger the pop-up. It's essentially using the display: block vs display: none (css) to show and hide the video. This code works, but I realized that the video continues to play when I close the pop-up.

Code to trigger the pop-up:

 a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
  video</a>

Code to close the pop-up:

a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    Close</a>

Is there any jquery or javascript I can add to the close part to make the video stop?

Any help is so appreciated. Thank you in advance.

user2690151
  • 125
  • 2
  • 11
  • 1
    it may be better to add/remove the html when clicking the link rather than just hiding it – user2950720 Mar 25 '16 at 16:35
  • Off topic: You have a beautiful library at your disposal with jQuery. Use a document.ready block in a script tag rather than that hideous inline onclick attribute if at all possible. – isherwood Mar 25 '16 at 16:37

2 Answers2

0

I'm guessing the video loads on a iframe element, try to kill the iframe element:

var iframe = document.querySelector("iframe"); iframe.parentNode.removeChild(iframe);

GBarroso
  • 467
  • 1
  • 8
  • 19
  • Thank you for feedback. It did the trick...but if I want to go back to view it again, its gone. I added this section to the head: and then added closeIframe() to a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';closeIframe();">Close. Any thoughts? – user2690151 Mar 25 '16 at 16:58
  • I'm not sure how you are implementing the iframe, but I guess you could just dynamically create it again in the trigger to open (or just dynamically create it after the closeIframe(), with the display none and etc so it wouldn't show. – GBarroso Mar 25 '16 at 17:12
  • Maybe [this](http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe) would be a more elaborated answer for what you are trying to achieve. The guys in the first answer has a nice toggleVideo() method that seems to pause it – GBarroso Mar 25 '16 at 17:12
0

Thanks All. I got it to work with this code from here: enter link description here. I added this to my function:

 <script>

$(function(){
$('.close').click(function(){
    $('iframe').attr('src', $('iframe').attr('src'));
});
});

And added the class="close"> to my a href close code.

Really appreciate the help.

Community
  • 1
  • 1
user2690151
  • 125
  • 2
  • 11