Question

我有问题，IFTTT中不允许使用iframe代码，因此需要以html代码不需要添加iframe标记的方式来填充当前的javascript。

找到我当前的youtube iframe脚本，

$("[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);
    
    $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,
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;
}

<div class="page">
    <p><a href="#media-popup" data-media="//www.youtube.com/embed/YoXa2Pl7Hk0">click me</a></p>
    
    <div class="popup" id="media-popup">
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

我尝试使用以下博客参考即兴创作，但没有成功，博客参考网址：http://www.labnol.org/internet/light-youtube-embeds/27941/

我的最终目标是从HTML中移除iframe标记而不会干扰当前输出。

如何使用javascript创建youtube iframe代码？

0 个答案: