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

您还忘记了将 link 添加到点击 (<a id="play-video" href="#">Play Video</a><br />) 所需的 HTML 文件并从您的代码中删除 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>

YouTube：仅在单击按钮时播放 YouTube 视频

YouTube: play YouTube video just when click button

javascript

php

youtube

video

iframe