Question

我想使用jquery在自定义按钮单击中播放嵌套iframe中的youtube。

＆＃13;

jQuery(document).ready(function($){
    $(".playButton").click(function(){
       $(".flex-active-slide .player")[0].src += "?autoplay=1";
      });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playButton">Play button</div>

<iframe>
    <html>
        <body>
          <div class="embedVideo">
            <div class="player">
           <iframe src="//www.youtube.com/embed/sqpKq6k04vk?width%3D640%26amp%3Bheight%3D360%26amp%3Bautoplay%3D0%26amp%3Bvq%3Dlarge%26amp%3Brel%3D0%26amp%3Bcontrols%3D1%26amp%3Bautohide%3D2%26amp%3Bshowinfo%3D1%26amp%3Bmodestbranding%3D0%26amp%3Btheme%3Ddark%26amp%3Biv_load_policy%3D1%26amp%3Bwmode%3Dopaque">
              <html>
                 <body>
                    <div id="player">
                      <div class="html5-videoPlayer">
                        <video ></video>
                      </div>  
                    </div>  
                 </body>
              </html>
            </iframe>
            </div>  
           </div>
        </body>
    </html>
</iframe>

＆＃13;

Answer 1

您需要使用YouTube Player API

这是一个简单的解决方案

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <button id="play">Play</button>
    <button id="stop">Stop</button>

    <div id="video-placeholder"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>

    <script>
    var player;
     function onYouTubeIframeAPIReady() {
        player = new YT.Player('video-placeholder', {
          height: '390',
          width: '640',
          videoId: '6plKMU0tTTk', // insert your video id here - example:   https://www.youtube.com/watch?v=6plKMU0tTTk

        });
     }

    $( document ).ready(function() {
      $('#play').on('click', function () {
        player.playVideo();
      });

      $('#stop').on('click', function () {
        player.pauseVideo();
      });
    });
    </script>
  </body>
</html>

Answer 2

更新了jsfiddle的代码位置。请查看以下链接以获取解决方案

[https://jsfiddle.net/rbs02hr8/1/][1]

参考网站

https://codepen.io/martinwolf/pen/dyLAC

在自定义按钮单击中播放iframe内部的YouTube视频

2 个答案: