将内容部分附加到视频灯箱

Question

设置

我有几个缩略图，每个缩略图下都有一个描述（标题+段落）。单击缩略图时，视频将在灯箱中播放。

描述包含在一个带有.video-info类的div中。

到目前为止，我的第一部分工作正常。

目的

我需要在灯箱的视频下方显示说明（标题+段落）。

基本上，我需要在视频播放模式时将.video-info附加到视频中。

问题

我无法弄清楚脚本中的哪个位置需要将容器.video-info附加到视频中，以便在灯箱中显示。

HTML

<ul>
    <li>
        <a href="#" class="link-lightbox" data-videoid="CuH3tJPiP-U" data-videosite="youtube"><img src="http://placehold.it/200/339?text=YouTube" alt=""></a>
        <div class="video-info">
            <h6>Heading</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae consequuntur, labore animi assumenda aliquam asperiores!</p>
        </div>
    </li>
    <li>
        <a href="#" class="link-lightbox" data-videoid="108210854" data-videosite="vimeo"><img src="http://placehold.it/200/903?text=Vimeo" alt=""></a>
        <div class="video-info">
            <h6>Heading 2</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, nulla.</p>
        </div>
    </li>
</ul>

jQuery脚本

$(".link-lightbox").on("click", function(e) {
    e.preventDefault();
    if (window.innerHeight > 540) var a = (window.innerHeight - 540) / 2;
    var b =
        '<iframe src="" width="640" height="480" id="video-embed" style="border:0;"></iframe>',
        c = '<a href="#" id="close-icon"></a>',
        d = '<div class="lightbox" style="margin-top:' + a + 'px">',
        e = '<div id="back-lightbox">',
        f = '<div id="background-close"></div>',
        g = '<div id="window">',
        h = '</div></div></div>';
    if ($("body").append(g + f + e + d + c + b + h), $("#window").hide(),
        "youtube" == $(this).data("videosite")) var i =
        "http://www.youtube.com/embed/" + $(this).data("videoid") +
        "?autoplay=1";
    else if ("vimeo" == $(this).data("videosite")) var i =
        "http://player.vimeo.com/video/" + $(this).data("videoid") +
        "?autoplay=1";
    $("#window").fadeIn(), $("#video-embed").attr("src", i), $(
        "#close-icon").on("click", function(e) {
        e.preventDefault();
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    }), $("#background-close").on("click", function() {
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    })
}), $(document).on("keyup", function(a) {
    27 == a.keyCode && $("#window").fadeOut("fast", function() {
        $(this).remove()
    })
}), $(document).on("mouseover", function() {
    var a = (window.innerHeight - 540) / 2;
    $(".lightbox").attr("style", "margin-top:" + a + "px")
});

我尝试了什么

我认为可以使用.append()或其中一种jQuery方法将元素附加到其他元素：

if ($("body").append(g + f + e + d + c + b + h).append(".video-info")

我还尝试在列表中添加变量，但它不起作用：

    h = '</div></div></div>',
    z = '$(".video-info")'; //I tried adding it here and adding the variable name below
if ($("body").append(g + f + e + d + c + b + h + z), $("#window").hide(),

演示

您可以看到 demo in CodePen here

问题

知道如何将描述容器合并到视频灯箱中吗？

感谢。

Answer 1

在我的朋友Jake Boyles的帮助下，我们能够修改脚本，并在灯箱模式下显示时将.video-info容器附加到视频中。

新脚本就是这个（注意代码中的注释）：

$(".link-lightbox").on("click", function(e) {
    e.preventDefault();
    var info = $(this).parent().find('.video-info').html(); //CREATE VARIABLE HERE
    if (window.innerHeight > 540) var a = (window.innerHeight - 540) / 2;
    var b = '<iframe src="" width="640" height="480" id="video-embed" style="border:0;"></iframe>',
        c = '<a href="#" id="close-icon"></a>',
        d = '<div class="lightbox" style="margin-top:' + a + 'px">',
        e = '<div id="back-lightbox">',
        f = '<div id="background-close"></div>',
        g = '<div id="window">',
        h = '<div class="video-info">'+info+'</div></div></div></div>'; //ADD THE .video-info CONTAINER HERE
    if ($("body").append(g + f + e + d + c + b + h), $("#window").hide(),
        "youtube" == $(this).data("videosite")) var i =
        "http://www.youtube.com/embed/" + $(this).data("videoid") +
        "?autoplay=1";
    else if ("vimeo" == $(this).data("videosite")) var i =
        "http://player.vimeo.com/video/" + $(this).data("videoid") +
        "?autoplay=1";
    $("#window").fadeIn(), $("#video-embed").attr("src", i), $(
        "#close-icon").on("click", function(e) {
        e.preventDefault();
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    }), $("#background-close").on("click", function() {
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    })
}), $(document).on("keyup", function(a) {
    27 == a.keyCode && $("#window").fadeOut("fast", function() {
        $(this).remove()
    })
}), $(document).on("mouseover", function() {
    var a = (window.innerHeight - 540) / 2;
    $(".lightbox").attr("style", "margin-top:" + a + "px")
});

The demo in CodePen已更新。