Skip to content

Instantly share code, notes, and snippets.

@ahmedmusawir

ahmedmusawir/gist:53e7488b6c8dfdc859f6a6338e37ce89

Created June 29, 2018 04:08
Show Gist options
  • Save ahmedmusawir/53e7488b6c8dfdc859f6a6338e37ce89 to your computer and use it in GitHub Desktop.
Save ahmedmusawir/53e7488b6c8dfdc859f6a6338e37ce89 to your computer and use it in GitHub Desktop.
Download ZIP
JS - JQUERY - YOUTUBE API V3 - PULLING VIDEOS BY PLAYLIST
Raw
gistfile1.txt
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<style>
.row {
margin-left: 18%;
}
</style>
<div class="container-fluid">
<div class="row justify-content-center">
<article class="col align-self-center">
<div class="youtube"></div>
</article>
</div>
</div>
<section id="results">Results go Here</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var playListID = 'PLriKzYyLb28kR_CPMz8uierDWC2y3znI2'
$(document).ready(function(){
$.get( "https://www.googleapis.com/youtube/v3/playlistItems", {
part: 'snippet',
maxResults: 12,
playlistId: playListID,
key: 'AIzaSyAIMCxrRnRcYiNIhXK0IH_AC7OvS5eX1nc'},
function( data ) {
var output;
$.each( data.items, function( i, item ) {
console.log( item );
vidTitle = item.snippet.title;
vidId = item.snippet.resourceId.videoId;
// output = '<li>' + vidTitle + '</li>';
output = '<iframe width="400" height="200" src="https://www.youtube.com/embed/' + vidId + '" frameborder="0"; encrypted-media" allowfullscreen></iframe>';
$('.youtube').append( output );
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment