CODEWITHSUNDEEP
javascripthtml
Bob
Bob

Reputation: 477

Embedded Video keeps playing even after closed

I have a video which would keep playing even after I close it. I feel there is something I am missing in my jQuery. Could anyone please help me. Below is the code related to it.

Jquery

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var left = left/2 - 340;

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var top = top/2 - 180

    document.getElementById("vid").style.top = top + "px";
    document.getElementById("vid").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

HTML

<div class="page"> <!-- class "page" is required for video to work-->
        <div class="popup" id="media-popup"> <!-- video embedded -->
            <iframe id="vid" src="http://testvideo.com" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div><!-- popup -->
</div>

Upvotes: 0

Views: 1580

Answers (1)

Vinay
Vinay

Reputation: 7676

You have a list of video url when you click one, a popup comes up showing the corresponding video.When you are done with that video you want to remove it by clicking outside the iframe but inside popup.

Here is the problem You are using this $(".page").removeClass("show-popup"); to get the second part done removing this class will simply hide it using css display orvisibility it's like making something invisible but still you can hear it, so video is invisible but it's still there playing .To fix this you need to wipe the src of iframe

$('.page iframe').attr("src", '');

Upvotes: 2

Related Questions