javascript - 我如何在 Javascript 灯箱中打开 iframe

Question

我正在使用静态页面，我想在其中打开灯箱中的 iframe。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rkd_7FbD_qs" frameborder="0" allowfullscreen></iframe>  

我能得到解决这个问题的帮助吗？

我正在使用灯箱，它可以很好地处理图像。但我想让它与 iframe 一起使用。 我想在灯箱内打开一个 iframe。如果我将 iframe 放在大图像的位置，它不起作用。

$(".sol-body")
        .on("click", ".primary-image, a.enlarge, img.enlarge", function( event ){
            event.preventDefault();
            event.stopPropagation();
            if ( $("a.enlarge").length != 0 ) {
                createOverlay();
                $(".overlay-img").append("<img src='" + $(".larger-img").attr("src") + "' />");
                animateOverlay(); 
            }             
        })
        .on("click", "li img", function( event ){
            event.preventDefault();
            createOverlay();
            $(".overlay-img").append("<img src='" + $(this).attr("src").replace("mini", "main") + "' />");
            animateOverlay();
        });

    function createOverlay() {
        $("body").append("<div class='overlay'><div class='overlay-img'></div><div class='overlay-close'>x</div></div>");

        $(".overlay")
            .on("click", function( event ){
                event.stopPropagation();
                $(".overlay").off("click");
                $(".overlay").remove();
            })
            .on("click", ".overlay-close", function( event ){
                event.stopPropagation();
                $(".overlay").off("click");
                $(".overlay").remove();
            })
            .on("click", ".overlay-img", function( event ){
                event.stopPropagation();
            });
    };

    function animateOverlay() {
        $(".overlay").animate({ "background-color" : "rgba(0, 0, 0, .85)" }, 200);
    };

});

Fiddle

Answer 1

我使用了一个支持图片、URL 和视频的永恒插件:

HTML5lightbox