Dhaval Prajapati
Dhaval Prajapati

Web Developer

Freelancer

Blogger

Web Designer

Full Stack Developer

Dhaval Prajapati

Web Developer

Freelancer

Blogger

Web Designer

Full Stack Developer

Blog Post

How To Get YouTube Playlist Contents from the YouTube Data API

August 31, 2020 wordpress | jQuery
Creativity Is More Than

currently in version 3, gives developers the ability to add a number of YouTube features to their applications. The API can be used to upload and search for videos, manage playlists and subscriptions, update channel settings and more.

Developers need to register their applications and obtain access before using the API. There are two types of access – simple and authorized. If you want to search for publicly available videos and playlists, then simple access via an API key is all that you need. For applications that take actions on behalf of the user such as uploading videos, editing playlists or anything that would require a user to be logged in, authorized access using an OAuth 2.0 workflow is required. With over a billion users and nearly 5 billion videos watched daily, YouTube has a vast collection of data to explore, much of it publicly available. I wanted to learn about the API and how I could use it to access this data.

  • Html Code
<div id="youtube"></div>
  • JavaScript Code
$(document).ready(function(){
               getVids();
 	});     
 
  function getVids(playListTitle,playListID) {
 

  	var url1 = 'https://www.youtube.com/watch?v=Ps4aVpIESkc&amp;list=PL9bw4S5ePsEEqCMJSiYZ-KTtEjzVy0YvK';
    parts = url1.split("list="),
    last_part = parts[parts.length];
    playlist_id=(parts[parts.length-1]);

    var api_key =  'AIzaSyCpP_wYoyZWv_yMmCs2O4u_qdQ9xqMh4m0';
//api key is requerd
    
    $.get(
      "https://www.googleapis.com/youtube/v3/playlistItems", {
        part: "snippet",
        maxResults: 100,
        playlistId: playlist_id,
        key: api_key },
        function(data) {
           var output;
           
           console.log(data.items);	
           $.each(data.items, function(i, item) {

              videoTitle = item.snippet.title;
              
              $("#youtube").append('<div class="wrapper"><div class="youtube" data-embed="'+item.snippet.resourceId.videoId+'"><img src="'+item.snippet.thumbnails.standard.url+'"><div class="play-button"></div></div></div>');

              //$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/'+item.snippet.resourceId.videoId+'?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');


           });                                                         
           
        }  
     );    
   }       




$(document).on('click', '.play-button', function(e) {

			var iframe = document.createElement( "iframe" );

							iframe.setAttribute( "frameborder", "0" );
							iframe.setAttribute( "allowfullscreen", "" );
							iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.parentElement.dataset.embed +"?rel=0&amp;showinfo=0&amp;autoplay=1" );

							this.innerHTML = "";
							this.append( iframe );
							this.classList.remove('play-button');

	});
  • Css Code
.wrapper {
	max-width: 680px;
	margin: 60px auto;
	padding: 0 20px;
}

.youtube {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 0.7;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube .play-button:hover {
    background-color: #ff0000;
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
Taggs:
Open chat
Contact

Notice: Undefined property: WP_Error::$term_id in /var/www/html/wp-content/themes/mytheme/footer.php on line 78