在模式弹出窗口中播放嵌入的YouTube视频

Question

是否可以将嵌入网站的YouTube视频在用户点击时以模式弹出方式播放？

视频是使用YouTube的嵌入代码嵌入的，这里有一个例子：

<iframe width="560" height="315" src="https://www.youtube.com/embed/iRYDYrj3Bfw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我看过几个将YouTube视频加载到模式弹出窗口的脚本，比如这个：https://appleple.github.io/modal-video/

但到目前为止，他们都是用纽扣或横幅来做这件事的。

我希望它能像做这样的事情一样简单：

<div id="wrapper">
<youtube iframe></iframe>
</div>

然后在javascript中点击#wrapper？

我想模仿以下网站的行为(你可能需要向下滚动到名为"Arbeiten"的部分，然后点击其中一个视频(：http://www.heimat.wien/#arbeiten

Answer 1

根据Ingus的解决方案，您可以像我在这里那样在iframe上覆盖一个div：

$(document).ready(function() {
autoPlayYouTubeModal();
});
function autoPlayYouTubeModal() {
var trigger = $('.trigger');
trigger.click(function(e) {
e.preventDefault();
var theModal = $(this).data("target");
var videoSRC = $(this).attr("src");
var videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal).on('hidden.bs.modal', function(e) {
$(theModal + ' iframe').attr('src', '');
});
});
};

.holder {
width: 560;
height: 315px;
position: relative;
}
.frame {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 560%;
height: 315px;
cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="holder">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VF1Yz05iQM0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="overlay trigger" src="https://www.youtube.com/embed/VF1Yz05iQM0" data-target="#videoModal" data-toggle="modal"></div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<button type="button" class="close btn-round btn-primary" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

工作小提琴：https://jsfiddle.net/nqxeo695/

注意：你应该更好地使用自己的图像或视频截图，而不是iframe，因为每个iframe都会立即加载视频。你在网站上放的视频越多，你的网站需要加载的时间就越长。

Answer 2

我使用以下示例进行引导3/4。它对我有效。

显示视频的youtube thumnail

<img src="https://img.youtube.com/vi/<?= $row['videoID'] ?>/mqdefault.jpg" class="video-btn img-fluid cursor-pointer" data-toggle="modal" data-src="https://www.youtube.com/embed/<?= $row['videoID'] ?>" data-target="#myModal">

注意$row['videoID']显示在我的数据库中

这是iframe 上保存视频的模态

<!-- Modal -->
<div class="modal videomodal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">

<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>        
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>
</div>

这个简单的脚本

<script type="text/javascript">
//for youtube video modal
$(document).ready(function() {
var $videoSrc;  
$('.video-btn').click(function() {
$videoSrc = $(this).data( "src" );
});
console.log($videoSrc);
$('#myModal').on('shown.bs.modal', function (e) {
$("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
})
$('#myModal').on('hide.bs.modal', function (e) {
$("#video").attr('src',$videoSrc); 
})
});
</script>

如果你想增加一些风格。你可以使用这个

.videomodal .modal-dialog {
max-width: 800px;
margin: 30px auto;
}    
.videomodal .modal-body {
position:relative;
padding:0px;
}
.videomodal .close {
position:absolute;
right:-30px;
top:0;
z-index:999;
font-size:2rem;
font-weight: normal;
color:#fff;
opacity:1;
}
.cursor-pointer{
cursor: pointer;
}