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 modal
var modal = document.getElementById('trailerdivbox');

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

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

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

function resetVideo() {
  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 it
window.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: 10px 12px;
}

#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;
}

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

<button id="watchbutton">Watch Trailer &#9658</button>


<div id="close">
  <div id="trailerdivbox">
    <div class="videoWrapper">
      <iframe id="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>

<iframe id="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":""}', '*');    });