我的youtube视频无法播放,只是显示黑屏,这是一个小问题,我认为有一些小问题,但我找不到它。
这也是页面的实时演示URL
<section class="video section text-left position-relative" id="f">
<div class="vid-img section-img wow fadeInRight position-absolute">
<div class="Video-content">
<img src="assets/images/Video-back.png" alt="">
<a class="mfp-iframe video-play-btn video-play-cus" data-toggle="modal" data-src="https://www.youtube.com/embed/nj3CaqBT7lY" data-target="#myModal"><img src="assets/images/play.png" alt=""></a>
</div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 section-content wow fadeInLeft">
<div class="video-text">
<h1>The professional <br> development <br/> social network for <br/> 2019</h1>
<a class="mfp-iframe video-play-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/nj3CaqBT7lY" data-target="#myModal">See what we’re building</a>
</div>
</div>
</div>
</div>
</section>
<!--video-->
<!-- Video Popup-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">Close Video <img src="assets/images/close-btn.svg" alt=""></button>
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always">></iframe>
</div>
</div>
</div>
</div>
</div>
这是javascript / jquery源代码。我想是这样,但仍然显示黑屏。
<script type="text/javascript">
$('.video-play-btn').click(function()
{
$videoSrc = $(".video-play-btn").data( "src" );
});
</script>
<script type="text/javascript">
// when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function (e)
{
// set the video src to autoplay and not to show related video.
console.log($("#video").attr('src',$videoSrc));
//$("#video").attr('src',$videoSrc + "?rel=0&showinfo=0&modestbranding=1&autoplay=1&controls=0&'enablejsapi=1" );
});//#myModal show
// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e)
{
// a poor man's stop video
$("#video").attr('src',$videoSrc);
//remove modal from DOM
//$("#myModal").detach();
});//#myModal close
</script>
答案 0 :(得分:1)
您的来源在实时版本中未定义。您没有将YouTube视频的源添加到iframe。
它显示实时版本src上存在iframe错误:
src="undefined?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=0"
应该类似于以下示例:
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
检查您的iframe代码:
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always">></iframe>