YouTube：只需单击按钮即可播放 YouTube 视频

Question

我的页面包含嵌入在 Iframe 中的 YouTube，我让它无法点击，我想在点击播放按钮时播放视频，我在这里和网络上搜索并测试了它们，但它们不起作用：

<div class="col-md-6">
        <div class='py-3' ><?php echo $course_name?></div>
        <div class="embed-responsive embed-responsive-16by9 px-6 py-6" style='pointer-events: none'>
            <iframe  id='video'
                src="<?php echo $course_video?>">  <!--the Youtube livk is come  from server as : https://www.youtube.com/embed/xxxxxxxxxxxx -->
            </iframe>
        </div>
        <div class='row w-100 justify-content-center mt-3'><button  class='btn bg-primary' id='play_video'><i class=" fa fa-play"></i></button></div>
</div>

还有我的 JavaScript 代码：

$(document).ready(function(){
        $('#play_video').on('click', function(ev) {
            $("#video")[0].src += "&autoplay=1";
            ev.preventDefault();
        })

})

我该怎么做？

Answer 1

您忘记在 JavaScript 中添加分号：

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();
 
  });
});

您还忘记将链接添加到您的 HTML 文件中，单击 (<a id="play-video" href="#">Play Video</a><br />) 并从您的代码中删除 style='pointer-events: none'：

<div class="col-md-6">
    <div class='py-3' ><?php echo $course_name?></div>
        <div class="embed-responsive embed-responsive-16by9 px-6 py-6">
            <a id="play-video" href="#">Play Video</a><br />
            <iframe  id='video' src="<?php echo $course_video?>">
            </iframe>
        </div>
</div>