小开

你能发布你的整个 HTML 文档和你使用的浏览器/版本吗？

我重新创建了你的页面，并在3个浏览器(Chrome，FF，IE8)中进行了测试。我能够停下来，并开始令人敬畏的 WDS4预告片没有任何问题。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<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>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jq.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="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>
</body>
</html>

你可以尝试把你的模态播放器的 Z 索引在堆栈中更高？

$('#myModal iframe').css("z-index","999");

小开

最佳答案

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

在 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 {


}

小开

我有一个提示给你！

我会用:

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

而不是:

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

因为你也可以关闭模式没有按钮，所以有这个代码，它将删除视频每次模式将隐藏。

小开

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

只需将? html5 = 1添加到 iframe 上的 source 属性，如下所示:

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

小开

我在 wordpress 模板上解决了这个问题:

$videoLink ="http://www.youtube.com/watch?v=yRuVYkA8i1o;".
<?php
parse_str( parse_url( $videoLink, PHP_URL_QUERY ), $my_array_of_vars );
$youtube_ID = $my_array_of_vars['v'];
?>
<a class="video" data-toggle="modal" data-target="#myModal" rel="<?php echo $youtube_ID;?>">
<img src="<?php bloginfo('template_url');?>/assets/img/play.png" />
</a>


<div class="modal fade video-lightbox" id="myModal" 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">&times;</button>
</div>
<div class="modal-body"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
jQuery(document).ready(function ($) {
var $midlayer = $('.modal-body');
$('#myModal').on('show.bs.modal', function (e) {
var $video = $('a.video');
var vid = $video.attr('rel');
var iframe = '<iframe />';
var url = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1";
var width_f = '100%';
var height_f = 400;
var frameborder = 0;
jQuery(iframe, {
name: 'videoframe',
id: 'videoframe',
src: url,
width:  width_f,
height: height_f,
frameborder: 0,
class: 'youtube-player',
type: 'text/html',
allowfullscreen: true
}).appendTo($midlayer);
});


$('#myModal').on('hide.bs.modal', function (e) {
$('div.modal-body').html('');
});
});
</script>

小开

如果你不想编辑引导 CSS 或者上面所有的都不能帮助你(就像我的例子一样) ，有一个简单的修复方法可以让视频在 Firefox 上以模态运行。

你只需要从模态中移除“乡村”类，当它打开“在”类的时候:

$('#myModal').on('shown.bs.modal', function () {
$('#myModal').removeClass('in');
});

小开

我把这个 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>

查询功能:

//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();
});

小提琴: Http://jsfiddle.net/jeremykenedy/h8das/1/

小开

在另一个线程中发现了这一点，它在桌面和移动设备上运行良好——这一点在其他一些解决方案中似乎并不正确。将此脚本添加到页面末尾:

<!--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>

小开

<a href="#" class="btn btn-default" id="btnforvideo" data-toggle="modal" data-target="#videoModal">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 width="100%" height="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>

小开

使用 $('#introVideo').modal('show');与引导程序正确触发冲突。当你点击打开模态的链接时，它会在完成渐变动画之后立即关闭。只要移除 $('#introVideo').modal('show'); (使用 bootstrap v3.3.2)

这是我的代码:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>




<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item allowfullscreen"></iframe>
</div>
</div>
</div>
</div>
</div>




<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>


<script>
//JS


$('#videoLink').click(function () {
var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
// $('#introVideo').modal('show'); <-- remove this line
$('#introVideo iframe').attr('src', src);
});




$('#introVideo button.close').on('hidden.bs.modal', function () {
$('#introVideo iframe').removeAttr('src');
})
</script>

小开

User3084135的回答对我来说是一个很好的基础，但是我还需要加入:

本地托管视频的“ video”标签以及外部托管视频的“ iframe”标签
确保源被删除，但是模式被删除
该解决方案在 Bootstrap 响应式设计中起作用
所有视频自动播放模式打开
可能有多种情况

我完成的解决方案是这样的:

模式触发按钮

<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">

Data-frame 属性可以是“ iframe”或“ video”，以反映适当的标记类型: iframe 用于外部视频，video 用于本地托管。

启动响应视频容器

IFrame:

<div align="center" class="embed-responsive embed-responsive-16by9">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

视频:

<div align="center" class="embed-responsive embed-responsive-16by9">
<video width="640" height="364" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

它们都位于标准 Bootstrap 响应模式 div 中。

JQuery 脚本

<script>
$(document).ready(function(){
function autoPlayModal(){
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function() {
var theFrame = $(this).data( "frame" );
var theModal = $(this).data( "target" );
videoSRC = $(this).attr( "data-theVideo" );
if (theFrame == "iframe") {
videoSRCauto = videoSRC+"?autoplay=1" ;
} else {
videoSRCauto = videoSRC;
$("[id*=portfolioModal] video").attr('autoplay','true');
}
$(theModal+' '+ theFrame).attr('src', videoSRCauto);
$("[id*=portfolioModal]").on('hidden.bs.modal', function () {
$("[id*=portfolioModal] "+ theFrame).removeAttr('src');
})
});
}


autoPlayModal();
});
</script>

由于自动播放与 iframe 和 video 标签的工作方式不同，因此使用条件来处理它们。为了允许多个 Modal，使用通配符选择器来识别它们(在我的例子中是 PortfolioModal1-6)。

小开

我也有同样的问题-我刚刚添加了字体-真棒的 cdn 链接-注释掉下面的引导程序解决了我的问题。.没有真正的故障排除，因为字体真棒仍然工作-

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

小开

$('#videoLink').click(function () {
var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
// $('#introVideo').modal('show'); <-- remove this line
$('#introVideo iframe').attr('src', src);
});


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>


<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item allowfullscreen"></iframe>
</div>
</div>
</div>
</div>
</div>

小开

Bootstrap 确实提供了开箱即用的模态弹出功能。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a class="btn btn-primary" data-toggle="modal" href="#modal-video"><i class="fa fa-play"></i> watch video</a>
<div class="modal fade" id="modal-video" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">close <i class="fa fa-times"></i></button>
</div>
<div class="modal-body">
<iframe type="text/html" width="640" height="360" src="//www.youtube.com/embed/GShZUiyqEH0?rel=0?wmode=transparent&amp;fs=1&amp;rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen=""></iframe>
<p>Your video</p>
</div>
</div>
</div>
</div>

小开

好吧，我找到解决办法了。

                <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<h3 class="modal-title" id="modal-login-label">Capital Get It</h3>
<p>Log in:</p>
</div>


<div class="modal-body">


<h4>Youtube stuff</h4>






<iframe src="//www.youtube.com/embed/lAU0yCDKWb4" allowfullscreen="" frameborder="0" height="315" width="100%"></iframe>
</div>




</div>


</div>
</div>
</div>

小开

对于 Bootstrap 4，它处理视频，图像和页面..。

Http://jsfiddle.net/c4j5pzua/

$('a[data-modal]').on('click',function(){
var $page = $(this).data('page');
var $image = $(this).data('image');
var $video = $(this).data('video');
var $title = $(this).data('title');
var $size = $(this).data('size');
$('#quickview .modal-title').text($title);
if ($size) { $('#quickview .modal-dialog').addClass('modal-'+$size); }
if ($image) {
$('#quickview .modal-body').html('<div class="text-center"><img class="img-fluid" src="'+$image+'" alt="'+$title+'"></div>');
} else if ($video) {
$('#quickview .modal-body').html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/'+$video+'?autoplay=1" allowfullscreen></iframe></div>');
}
if ($page) {
$('#quickview .modal-body').load($page,function(){
$('#quickview').modal({show:true});
});
} else {
$('#quickview').modal({show:true});
}
$('#quickview').on('hidden.bs.modal', function(){
$('#quickview .modal-title').text('');
$('#quickview .modal-body').html('');
if ($size) { $('#quickview .modal-dialog').removeClass('modal-'+$size); }
});
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="container my-4">


<h3 class="mb-4">Bootstrap 4 Modal YouTube Videos, Images & Pages</h3>


<a href="javascript:;" class="btn btn-primary" data-modal data-video="zpOULjyy-n8" data-title="Video Title" data-size="xl">Video</a>


<a href="javascript:;" class="btn btn-primary" data-modal data-image="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social-logo.png" data-title="Image Title" data-size="">Image</a>


<a href="javascript:;" class="btn btn-primary" data-modal data-page="https://getbootstrap.com" data-title="Page Title" data-size="lg">Page *</a>


<p class="mt-4">* Clicking this will break it, but it'll work using a local page!</p>


</div>


<div class="modal fade" id="quickview" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>

小开

试试这个 为了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

小开

使用最新的 Bootstrap 4.5 + 引导程序4.5 +

通过从 HTML 页面传递不同的 Youtube URL，重复使用相同的模式
与一个伟大的 播放按钮图标和 启用自动播放
只有 复制密码和你都是 预备! ! ！
在 Codepen中查看解决方案

    // javascript using jQuery - can embed in the script tag
$(".video-link").click(function () {
var theModal = $(this).data("target");
videoSRC = $(this).attr("data-video");
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});

#video-section .modal-content {
min-width: 600px;
}


#video-section .modal-content iframe {
width: 560px;
height: 315px;
}

<!-- HTML with Bootstrap 4.5 and Fontawesome -->
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>


<body>
<section id="video-section" class="py-5 text-center text-white">
<div class="container h-100 d-flex justify-content-center">
<div class="row align-self-center">
<div class="col">
<div class="card bg-dark border-0 mb-2 text-white">
<div class="card-body">
<a href="#" class="btn btn-primary bg-dark stretched-link video-link" data-video="https://www.youtube.com/embed/HnwsG9a5riA" data-toggle="modal" data-target="#video-modal">
<i class="fas fa-play fa-3x"></i>
</a>
<h1 class="card-title">Play Video</h1>
</div>
</div>
</div>
</div>
</div>


<!-- Video Modal -->
<div class="modal fade" id="video-modal" tabindex="-1" role="dialog">
<div class="modal-dialog h-100 d-flex align-items-center">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


</body>
</html>




[1]: https://codepen.io/richierich25/pen/yLOOYBL

小开

为了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/

小开

Bootstrap 5 (为读者从 Bootstrap 文档达到这一点)

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

如 Bootstrap 文档中所述，引用这个问题是为了解决“ 模式需要额外的 JavaScript 不在 Bootstrap 自动停止播放等”的问题

YouTube 视频将按照 Bootstrap 模式的预期工作，只要您使用 iframe而不是 video元素来防止 CORS 错误。然而，iframe没有像 autoplay, loop, etc...这样的视频特定属性，这意味着唯一的播放控制是那些嵌入在 YT 视频。例如，当模式打开时，您不能 autostart视频(autostart = 1不再在 YTAPI 中工作)

控制 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 回放演示

Bootstrap 3和 Youtube 在 Modal