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 ►</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:
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":""}', '*'); });
Post a Comment for "How To Make Youtube Embedded Video Load Only When Box Appears"