How To Make Youtube Embedded Video Load Only When Box Appears

In my code, youtube video appears in a pop-up window, when users click on a button. This is my fiddle I want the video to load only when someone click on the button and pop-up wi

Solution 1:

Add ?autoplay=1 to your iframe src.

And reset the src to stop the video.

To load the iframe source only on button click, instead of loading it on document load, you should set the src attribute on playVideo() function.

For that, you can add a new attribute to your iframe (data-src), which will store the video URL, and then, access it's value when needed.

// Get the modalvar modal = document.getElementById('trailerdivbox');

// Get the button that opens the modalvar btn = document.getElementById("watchbutton");

functionplayVideo() {
  var video = document.getElementById('video');
  var src = video.dataset.src;

  video.src = src + '?autoplay=1';
}

functionresetVideo() {
  var video = document.getElementById('video');
  var src = video.src.replace('?autoplay=1', '');

  video.src = '';
  video.src = src;
}

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  playVideo();
}

var trailerbox = document.getElementById("close");

trailerbox.onclick = function() {
  modal.style.display = "none";
  resetVideo();
}

// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    resetVideo();
  }
}

/* Watch Trailer Button CSS */#watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  /* This one removes the border of button */padding: 10px12px;
}

#watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

#trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */background-color: rgb(0, 0, 0);
  /* Fallback color */background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */padding-top: 25px;
  height: 0;
}

.videoWrapperiframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<buttonid="watchbutton">Watch Trailer &#9658</button><divid="close"><divid="trailerdivbox"><divclass="videoWrapper"><iframeid="video"class="trailervideo"width="560"height="315"src="https://www.youtube.com/embed/TDwJDRbSYbw"frameborder="0"allowfullscreen></iframe></div></div></div>

See the fiddle if you can't play the video in the snippet above.

Solution 2:

Check API Doc of youtube API

player.stopVideo()

So in Jquery

$('#ID').get(0).stopVideo();

Try this

Solution 3:

<a id="stop" href="#">Stop</a>

<iframeid="popup-youtube-player"width="640"height="360"src="http://www.youtube.com/embed/geTgZcHrXTc?enablejsapi=1&version=3&playerapiid=ytplayer"frameborder="0"allowfullscreen="true"allowscriptaccess="always"></iframe>


$('#stop').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    });