Why are attributes being removed from an iframe on click?

1
votes

I click on the image and the pop up works fine. However, when I click outside the popup, the iframe allowfullscreen and frameborder attributes are removed. I click the popup again and fullscreen works and there's a white line. I want the popup to stop the video playing once closed and the iframe to return to having no src and keep its attributes.

I've tried:

  • updating attributes using javascript/jquery
  • replacing html through javascript/jquery (commented out)

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/portfolio.css" type="text/css">



</head>
<body>
<div class="page">
    <a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
    <a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>

    <div class="popup" id="media-popup">
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
    </div>
</div>
<script src="/javascript/portfolio.js">
</script>







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

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

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

});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    //$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
    $(".page").removeClass("show-popup");

});


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

});


html,
body {
    margin:0; padding:0; height:100%;
}
p {
    margin:0;
}
.page {
    position: relative;
    height:100%;
}

.popup {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}

.popup > iframe {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-280px;
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/portfolio.css" type="text/css">



</head>
<body>
<style src="/css/portfolio.css">
</style>
<div class="page">
    <a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
    <a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>

    <div class="popup" id="media-popup">
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
    </div>
</div>
<script src="/javascript/portfolio.js">
</script>

</body>
</html>







</body>
</html>

CSS

html,
body {
    margin:0; padding:0; height:100%;
}
p {
    margin:0;
}
.page {
    position: relative;
    height:100%;
}

.popup {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}

.popup > iframe {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-280px;
}

Javascript/Jquery

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

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

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

});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    //$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
    $(".page").removeClass("show-popup");

});


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

});
2
javascriptjqueryhtmlcss

2 Answers

0
votes

Define your iframe variable outside the click function so it's available elsewhere: 

var $popupIframe;

$("[data-media]").on("click", function(e) {
    // ...
    $popupIframe = $(popup).find("iframe");
    $popupIframe.attr("src", videoUrl);
    // ...
});

$(".popup").on("click", function(e) {
    // ...
    $popupIframe.attr('src', '');
});

Demo

0
votes

It was the jquery. Needs to be onLoad.

$(document).ready(function() {

    var $popupIframe;

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

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

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

    });

    $(".popup").on("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        //$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
        $(".page").removeClass("show-popup");
        $popupIframe.attr('src', '');
    });


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