YouTube API - Multiple Videos on One Page

index.html

<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>

script.js

// 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');
	});
}

style.scss

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.markdown

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.

thanks, it was useful to me

🥇

thanks!!

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.

Thank you, you have given me a valuable lesson.

thank you, this one was helpfull!