播放內置iframe的自定義按鈕中的YouTube視頻點擊

我想播放嵌入的iframe中的自定義按鈕點擊使用jquery的YouTube。播放內置iframe的自定義按鈕中的YouTube視頻點擊

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

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

來源

2016-12-27 user3386779

看到這一點：'http://stackoverflow.com/questions/6246939/start-play-embedded-iframe-youtube-video-on-click-of-an- image' –

您需要使用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>

來源

2016-12-27 09:52:12

下面鏈接jsfiddle.Please檢查

更新代碼的地方你的解決方案

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

參考網站

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

來源

2016-12-27 10:01:14

播放內置iframe的自定義按鈕中的YouTube視頻點擊

回答

相關問題