The following code will help you to pull a YouTube playlist with Javascript and will update the playlist automatically every time the page loads up
Javascript code
This is the full JS code I will use on this example, the first part is just to make the playlist to switch the videos on with the links on the playlist:
function switchVideo(videoSrc) {
videoSrc = 'https://' + videoSrc;
document.getElementById('FeaturedVideoID').src = videoSrc;
}
Here is the full JS file:
function switchVideo(videoSrc) {
videoSrc = 'https://' + videoSrc;
document.getElementById('FeaturedVideoID').src = videoSrc;
}
function onGoogleLoad() {
gapi.client.setApiKey('YOUR_APIKEY');
gapi.client.load('youtube', 'v3', function() {
var request = gapi.client.youtube.playlistItems.list({
part: 'snippet',
playlistId: 'PLAYLIST_ID_TO_PULL',
maxResults: 50
});
request.execute(function(response) {
var container = $(".responsive-video-list");
if(!container[0]) {
container = $("<div class='responsive-video-list' />")
$(".bodytext .description").append(container);
}
container.append("<div class=\"featured-video\"><iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/"+ response.items[0].snippet.resourceId.videoId+"?autoplay=0&rel=0&showinfo=0&modestbranding=1&autohide=1\" frameborder=\"0\" allowfullscreen id=\"FeaturedVideoID\"></iframe></div>")
var containerlist = $("<ul />");
container.append(containerlist);
for (var i = 0; i < response.items.length; i++) {
console.log(response.items[i].snippet.title + " published at " + response.items[i].snippet.publishedAt)
containerlist.append("<li><a onclick=\"switchVideo('www.youtube.com/embed/"+ response.items[i].snippet.resourceId.videoId+"?autoplay=1&rel=0&showinfo=0&modestbranding=1&autohide=1');\" href=\"javascript:void(0);\"> <img src=\"https://img.youtube.com/vi/"+ response.items[i].snippet.resourceId.videoId+"/0.jpg\">"+response.items[i].snippet.title+"</a></li> ");
}
});
});
}
HTML code
The Javascript will look for a div with a class "responsive-video-list" inside a div with a class description that is also inside a div with a class bodytext. If it didn't find the "responsive-video-list" it will create it.
The HTML should look like this:
<html>
<head></head>
<body>
<div class="bodytext">
<div class="description">
<div class="responsive-video-list">
</div>
</div>
</div>
</body>
</html>
or at least something like this:
<html>
<head></head>
<body>
<div class="bodytext">
<div class="description">
</div>
</div>
</body>
</html>
For this example we will use the following HTML:
<html>
<head>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/global.css" /></head>
<script src="https://apis.google.com/js/client.js?onload=onGoogleLoad"></script>
<div class="bodytext">
<div class="description">
<div class="responsive-video-list">
</div>
</div>
</div>
</body>
</html>
CSS code
The following code will make the playlist look great and also responsive:
.video-wrapper{position:relative;width:100%;height:0;padding-top:56.25%}
.video-wrapper iframe{position:absolute;width:100%;height:100%;top:0;left:0}
.responsive-video-list{width:100%;margin:0 auto 1.6em} .responsive-video-list ul{padding:0;margin:0;list-style-type:none}
.responsive-video-list ul img{display:none;width:60px;height:auto;float:left;margin-right:8px;margin-top:-11px}
.responsive-video-list ul li{padding:0;margin:0 0 4px;overflow:hidden}
.responsive-video-list ul a{display:inline-block;background-color:#ebebeb;width:100%;padding:11px;position:relative}
.responsive-video-list ul a:hover{text-decoration:none !important;background-color:#e0e0e0}
@media screen and (min-width: 46.875em){
.responsive-video-list ul img{display:block}
.responsive-video-list ul a{padding:11px 11px 0 0}
}