Stop YouTube video when div is closed with jQuery

Question

So I have a pop over div that shows when going to the site with a YouTube video auto playing in there, the problem is, if the box is closed the audio of the video still remains, is there a way to get around this with jQuery? I don't know if there is a way to stop sound from a certain element?

The code is below.

CSS

.full_page_overlay1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #626262;
    opacity: 0.9;
    z-index: 2147483646;
}

.cart_over1 {
    width: 1024px;
    position: fixed;
    float: left;
    border: 1px solid black;
    box-shadow: 1px 1px 10px black;
    background: white;
    z-index: 2147483647;
    border-radius: 10px;
}

#close_box1 {
    float: left;
    top: 0px;
    left: 0px;
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    font-size: 40px;
    text-align: center;
    color: black;
    text-shadow: 1px 1px 3px black;
    font-weight: bolder;
    cursor: pointer;
    margin-bottom: 10px;
}

HTML/PHP

<?php

  if ($_COOKIE['video'] != 'watched') {

$value = "watched";

// send a simple cookie
setcookie("video",$value,time() + (10 * 365 * 24 * 60 * 60));

?>

   <div class="full_page_overlay1"></div>

  <div class="container">

  <div class="cart_over1">

      <div id="close_box1">X</div>

      <iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

  </div>
      </div>
      <?php } ?>

And the jQuery

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
})
});

Many thanks in advance for your help.

http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery — Falguni Panchal, Jul 26 '13 at 12:36
@JamesLeist Fags pointed you to the question, when i googled "how to stop youtube player in div" that was the first result... — Patsy Issa, Jul 26 '13 at 12:41
@JamesLeist Patsy is just saying that you should do research, it's an important rule on SO. This question wouldn't be asked if you Googled 'stop a youtube video with jquery'. http://stackoverflow.com/questions/how-to-ask — Pieter, Jul 26 '13 at 12:43
@pieter I have indeed done my research but nothing answers my specific question — AppleTattooGuy, Jul 26 '13 at 12:44
@JamesLeist Then it makes sense to show your research in the question and explain why it isn't working for your situation. — Pieter, Jul 26 '13 at 12:45

score 2 · Answer 1 · answered Jul 26 '13 at 12:42

As you're using iFrame, you can just clear its src:

$( document ).ready(function() {
    $("#close_box1").on("click", function () {
        $(".full_page_overlay1").fadeOut();
        $(".cart_over1").fadeOut().find("iframe").attr("src", "");
    })
});

If you're using the jQuery UI Dialog, you could set this to be done on the close event.

score 2 · Accepted Answer · answered Jul 26 '13 at 12:46

2

Replace:

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

To:

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen id="clearmySound"></iframe>

Replace Js Code:

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
    $("#clearmySound").attr('src','');      
})
});

JSFIDDLE DEMO

answered Jul 26 '13 at 12:46

Dhaval Bharadva

3,053
2
24
35

If you can reach the iframe via some jQuery selector, why change the markup to achieve the same result? – emerson.marini Jul 26 '13 at 12:50
hi, how can I reopen the same youtube video after this action without loading my page ?? I am getting empty window because the 'src' is null.. – Priya Jayapal Oct 29 '15 at 12:25
@PriyaJayapal then you should remove last line `$("#clearmySound").attr('src','');` so it will not empty the `src` – Dhaval Bharadva Oct 29 '15 at 12:48

score 1 · Answer 3 · answered Jul 26 '13 at 12:42

Change your iframe so it has an ID:

  <div id="close_box1">X</div>

  <iframe width="1024" height="600" ID="autoplayvideoframe" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

Then remove that element when the window closes:

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
    $("#autoplayvideoframe").remove();
})
});

Alternatively you could just use one of the pre-existing modal popups which handle this kind of thing for you. Setting the iframe to be a fixed huge size like that means you're going to give a poor experience with tablets and mobile.

Stop YouTube video when div is closed with jQuery

3 Answers3