javascript - 使用 Bootstrap 模式的 Youtube 视频

Question

这是 3 个 youtube 视频的代码，点击图片/按钮会弹出一个 youtube 视频

<div class="container">
    <a href="#" class="btn btn-default" data-toggle="modal"   data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">VIDEO</a>
    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div>
                        <iframe class = "size" src=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal1" data-theVideo="https://www.youtube.com/embed/tIBxavsiHzM">VIDEO</a>
    <div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div>
                        <iframe class="size" src=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal2" data-theVideo="http://www.youtube.com/embed/W7qWa52k-nE">VIDEO</a>
    <div class="modal fade" id="videoModal2" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div>
                        <iframe class="size" src=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和CSS:

iframe.size
{
    width: 800px;
    height:550px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

JavaScript:

autoPlayYouTubeModal();
function autoPlayYouTubeModal() {
    var trigger = $("body").find('[data-toggle="modal"]');
    trigger.click(function () {
        var theModal = $(this).data("target"),
            videoSRC = $(this).attr("data-theVideo"),
            videoSRCauto = videoSRC + "?autoplay=1";
        $(theModal + ' iframe').attr('src', videoSRCauto);
        $(theModal + ' button.close').click(function () {
            $(theModal + ' iframe').attr('src', videoSRC);
        });
    });
}

所以根据上面的代码，我无法在单击按钮时创建或播放 3 个单独的视频。对此有解决方案吗

Answer 1

您的代码适用于 this fiddle 。

我唯一改变的是你的 YouTube 链接是“http”，而不是“https”，所以你可能在控制台中遇到混合内容错误。

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal2" data-theVideo="https://www.youtube.com/embed/W7qWa52k-nE">VIDEO</a>