Skip to content

Instantly share code, notes, and snippets.

@bajpangosh
Created November 27, 2018 08:09
Show Gist options
  • Save bajpangosh/d322c4d7823d8707e19d20bc71cd5a4f to your computer and use it in GitHub Desktop.
Save bajpangosh/d322c4d7823d8707e19d20bc71cd5a4f to your computer and use it in GitHub Desktop.
YouTube API - Multiple Videos on One Page
<div class="video-item">
<iframe id="video0" src="//www.youtube.com/embed/4DMGfbje7NY?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<button class="play">Play</button>
<button class="stop">Stop</button>
</div>
<div class="video-item">
<iframe id="video1" src="//www.youtube.com/embed/nJl-qVoEEJI?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<button class="play">Play</button>
<button class="stop">Stop</button>
</div>
<div class="video-item">
<iframe id="video2" src="//www.youtube.com/embed/JyNIJ8U03I0?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<button class="play">Play</button>
<button class="stop">Stop</button>
</div>
// YouTube API stuff
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Init empty array of iframe IDs, one from each video
var iframeIds = [];
// For each iframe you find, add its ID to the iframeIds array
var iframes = document.querySelectorAll(".video-item iframe");
iframes.forEach(function(iframe) {
iframeIds.push(iframe.id);
});
// Once the YouTube API is ready, for each iframeId in your array, create
// a new YT player and give it the onReady event
function onYouTubeIframeAPIReady() {
iframeIds.forEach(function(iframeId) {
var player = new YT.Player(iframeId, {
events: {
onReady: onPlayerReady
}
});
});
}
// Init empty array of iframe YT objects for use elsewhere
// Here I only use this to iterate through and pause all videos when
// another begins playing
var iframeObjects = [];
// Shared onReady event which adds events to each video's corresponding
// play and stop buttons
function onPlayerReady(event) {
var iframeObject = event.target;
var iframeElement = iframeObject.a;
var videoContainer = iframeElement.parentElement;
var play = videoContainer.querySelector(".play");
var stop = videoContainer.querySelector(".stop");
// Push current iframe object to array
iframeObjects.push(iframeObject);
play.addEventListener("click", function() {
// Pause all videos currently playing
iframeObjects.forEach(function(scopediframeObject) {
scopediframeObject.pauseVideo();
var scopediframeElement = scopediframeObject.a;
scopediframeElement.classList.remove('isPlaying');
});
// Play selected video
iframeObject.playVideo();
iframeElement.classList.add('isPlaying');
});
stop.addEventListener("click", function() {
iframeObject.pauseVideo();
iframeElement.classList.remove('isPlaying');
});
}
body {
background-color: #282828;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
margin: 30px;
.video-item {
margin-bottom: 30px;
min-width: 330px;
}
}
iframe {
display: block;
margin-bottom: 10px;
border: 2px solid black;
&.isPlaying {
border-color: lighten(darkgreen, 10%);
}
}
button {
color: white;
padding: 10px 20px;
cursor: pointer;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.1rem;
margin-right: 5px;
&.play {
background: darkgreen;
&:hover {
background: lighten(darkgreen, 10%);
}
}
&.stop {
background: darkred;
&:hover {
background: lighten(darkred, 10%);
}
}
}

YouTube API - Multiple Videos on One Page

Use the YouTube API to interact with videos programmatically!

YouTube explains in their docs how to implement their API with one video on the page, but having more than one video requires some adjustments.

Since my clients often need more than one video per page, I put together an example solution in this pen.

A Pen by Kayla Branch on CodePen.

License.

@trendak
Copy link

trendak commented Sep 23, 2021

thanks, it was useful to me

@daniela-balta
Copy link

🥇

@natanryuu
Copy link

thanks!!

@ibanezivan
Copy link

Thanks a lot @bajpangosh. But, maybe you can help me a bit more, please. So with tihs js, its possible to make traking by analytics in the videos? Thanks again.

@iwanse1977
Copy link

Thank you, you have given me a valuable lesson.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment