Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.