0

I want to play the youtube which is in nested iframe in custom button click using jquery.

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>
user3386779
  • 6,883
  • 20
  • 66
  • 134
  • see this: `http://stackoverflow.com/questions/6246939/start-play-embedded-iframe-youtube-video-on-click-of-an-image` – Suchit kumar Dec 27 '16 at 09:27

2 Answers2

0

You need to use the YouTube Player API

Here's a simple solution

<!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>
Boyko Arsov
  • 33
  • 4
0

Updated code place on jsfiddle.Please check below link for your solution

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

Reference site

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

dhruv jadia
  • 1,684
  • 2
  • 15
  • 28