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