模态中的Bootstrap 3和Youtube

Question

我正在尝试使用Bootstrap 3中的Modal功能来显示我的Youtube视频.它有效,但我无法点击Youtube视频中的任何按钮.

对此有何帮助？

这是我的代码:

<div id="link">My video</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>

Answer 1

我发现这个问题(或我在https://github.com/twbs/bootstrap/issues/10489上发现和描述的问题)与类上的CSS3转换(翻译)有关.modal.fade .modal-dialog.

在bootstrap.css中,您将找到如下所示的行:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

用以下内容替换这些行将正确显示电影(在我的情况下):

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {

}

Answer 2

我把这个html/jQuery动态YouTube视频模式脚本放在一起,当点击触发器(链接)时自动播放YouTube视频,触发器还包含要播放的链接.该脚本将找到本机引导模式调用,并使用触发器中的数据打开共享模式模板.见下文,让我知道你的想法.我很想听到想法......

HTML模式触发器:

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

HTML模式视频模板:

<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 width="100%" height="350" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

JQUERY功能:

//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
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);
    });   
  });
}

功能调用:

$(document).ready(function(){
  autoPlayYouTubeModal();
});

FIDDLE:http: //jsfiddle.net/jeremykenedy/h8daS/1/

Answer 3

我有一个提示给你!

我会用:

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal iframe').removeAttr('src');
})

代替:

$('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});

因为你也可以在没有按钮的情况下关闭模态,所以每次模态隐藏时它都会删除视频.

Answer 4

在另一个线程中找到了这个,它在桌面和移动设备上运行得很好 - 这对于其他一些解决方案来说似乎并不正确.将此脚本添加到页面末尾:

<!--Script stops video from playing when modal is closed-->
<script>
    $("#myModal").on('hidden.bs.modal', function (e) {
        $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });
</script>   

Answer 5

这是另一种解决方案:强制HTML5 youtube视频

只需将？html5 = 1添加到iframe的source属性,如下所示:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

Answer 6

Bootstrap 5（供读者从 Bootstrap 文档中获取此内容）

这是一个古老的 Bootstrap 3 问题，但我还没有找到任何解决控制播放问题的答案。

正如 Bootstrap 文档中所述，引用该问题是为了解决“模式需要 Bootstrap 中没有的额外 JavaScript 来自动停止播放等”的问题

只要您使用 aniframe而不是 avideo元素来防止 CORS 错误，YouTube 视频就会在 Bootstrap 模式中按预期工作。但是，iframe没有视频特定属性autoplay, loop, etc...，这意味着唯一的播放控件是嵌入在 YT 视频中的控件。例如，autostart模式打开时您无法播放视频（autostart=1 不再适用于 YT API）

这里解释了控制 YouTube 视频播放的新方法。以下是它在 Bootstrap 5 模式内的视频播放的具体工作方式。

模态标记

<div class="modal fade" id="dynamicVideoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="ratio ratio-21x9" id="player">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-dark" id="playBtn">Play</button>
                <button type="button" class="btn-dark" id="pauseBtn">Pause</button>
            </div>
        </div>
    </div>
</div>

JavaScript

var player
function onYouTubeIframeAPIReady() {
    console.log('onYouTubeIframeAPIReady...')
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE', // YT video source
        playerVars: {
            'playsinline': 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    })
}

function onPlayerReady(event) {
    event.target.playVideo() // autostart
}

function onPlayerStateChange(event) {
    // do other custom stuff here by watching the YT.PlayerState
}

function loadYouTubeVideo() {
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

}

var myModalEl = document.getElementById('dynamicVideoModal')
myModalEl.addEventListener('show.bs.modal', function (event) {
    // dynamically create video when modal is opened
    loadYouTubeVideo()
})


// optional hooks for controls outside YT
var playBtn = document.getElementById('playBtn')
playBtn.addEventListener('click', function (event) {
    console.log('play')
    player.playVideo()
})

var pauseBtn = document.getElementById('pauseBtn')
pauseBtn.addEventListener('click', function (event) {
    console.log('pause')
    player.pauseVideo()
})

Bootstrap 5 YouTube 播放演示

更新回复：评论“问题是当您关闭模式窗口时视频继续播放”。这超出了 OP 问题的范围，但您只需挂钩模式hidden事件并在 YT 播放器的适当实例上运行 .stop() 即可。例如：

dynamicVideoModal.addEventListener('hidden.bs.modal', event => {
    player.stopVideo()
})

Codeply（更新为模式关闭时停止）

Answer 7

对于引导5

在这里我分享对我有用的东西

触发按钮

<button data-bs-toggle="modal" data-tagVideo="https://www.youtube.com/embed/zcX7OJ-L8XQ" data-bs-target="#videoModal">Video</button>

模态语法

<div class="modal fade" id="videoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <iframe src="" allow="autoplay;" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

从数据中获取并自动播放视频的函数

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

文档准备好后调用该函数

<script>
  $(document).ready(function() {
    autoPlayYouTubeModal();
  });
</script>

这里 jsfiddle 在第一次运行时可能有一些 Cors 策略，所以只需刷新并再次单击按钮即可

• https://jsfiddle.net/alemens/f19kct0v/

Answer 8

试试这个For Bootstrap 4

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h2>Embedding YouTube Videos</h2>
<p>Embedding YouTube videos in modals requires additional JavaScript/jQuery:</p>

<!-- Buttons -->
<div class="btn-group">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/lQAUq_zs-XU">Launch Video 1</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/pvODsb_-mls">Launch Video 2</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/4m3dymGEN5E">Launch Video 3</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/uyw0VZsO3I0">Launch Video 4</button>
</div>

<!-- Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark border-dark">
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body bg-dark p-0">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script>
$(document).ready(function() {
    // Set iframe attributes when the show instance method is called
    $("#videoModal").on("show.bs.modal", function(event) {
        let button = $(event.relatedTarget); // Button that triggered the modal
        let url = button.data("video");      // Extract url from data-video attribute
        $(this).find("iframe").attr({
            src : url,
            allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        });
    });

    // Remove iframe attributes when the modal has finished being hidden from the user
    $("#videoModal").on("hidden.bs.modal", function() {
        $("#videoModal iframe").removeAttr("src allow");
    });
});
</script>

</body>
</html>

访问（链接断开）：https : //parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube