Youtube视频使用引导模式

Youtube video using bootstrap modal

本文关键字:模式 视频 Youtube      更新时间:2024-02-13

这是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个单独的视频。有没有解决这个的方案

您的代码在这个小提琴中工作。

我唯一改变的是你的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>