1. ホーム
  2. 質問と答え
  3. カスタムボタンでiframeの内側にあるyoutube動画をクリックしてクリックしてください。

カスタムボタンでiframeの内側にあるyoutube動画をクリックしてクリックしてください。

2016-12-27 10 views
0

jqueryを使ってカスタムボタンクリックでネストされたiframeにある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

+0

はこれを参照してください。 'http://stackoverflow.com/questions/6246939/start-play-embedded-iframe-youtube-video-on-click-of-an-画像 ' –

答えて

0

あなたはここに簡単な解決策

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

関連する問題

 関連する問題