How To Add Youtube Videos Slider widget for Blogger

Add Youtube Videos Slider widget for Blogger

Sometimes we want to display our YouTube videos on our blogs and WordPress users can do it with a single click because they can find hundreds of plugins online for embedding their YouTube videos on their blogs.

I also wanted to display recent YouTube videos on my Blogger blog but unfortunately I didn't find any specific widget for that. So I decided to make my own widget and share with you how to add YouTube videos slider widget for Blogger.

For developing this widget I played with the YouTube API and learned how to fetch latest YouTube videos from any channel using JSON feeds just like I designed Instagram profile and Instagram feed slider widgets for Blogger.


 What is YouTube videos slider widget?

A YouTube videos slider is a widget designed not specifically for Blogger or Blogspot users but WordPress users can also use it. When added, it displays five recent YouTube videos from any channel and you can easily change the number of videos to be displayed.

Your YouTube videos are shown in a slider with a perfect UI so that user can easily slide and watch videos. It also displays the following GIF preloader when the widget loads or when data is requested by browser from the JSON feed.


  • Coded in Pure JavaScript
  • Fetches recent videos from your YouTube channel
  • Updates automatically
  • Perfect UI
  • Loads faster and yet dynamic
  • Lightweight 
  • Uses GIF preloader
  • Secure with API key

 

API key for YouTube:

With the new rules and YouTube Data API v3 we are required to create a project in Google Developers Console and request an API key for interacting with the YouTube API or for submitting API requests.

Since we are viewing our YouTube videos outside of the YouTube website so we also need to get an API key before doing that. Just in case if you are wondering then API keys don't grant any access to private information. They can access only public information. Follow the simple steps below to get your API key:

  • Visit Google API console 
  • Login to your Google account
  • Now in the following window click on Create to create your project 
YouTube API key

  • Set Project Name and click on create button 

YouTube API key
  • Search for YouTube API and click on YouTube Data API v3


  •  Enable YouTube Data API v3

YouTube API key
  •  Now following window will appear, click on Create Credentials

  •  Now fill the credentials just like in the picture and click on What Credentials do I need?

YouTube API key

  •  Your API key is ready to use! Save it for now, we will use it later

YouTube API key

 Add YouTube videos slider widget in Blogger:

After creating project and getting your API key, you can now easily request data from YouTube JSON feed to add YouTube videos slider widget in your Blogger blog. Just follow the steps below:
  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML
  • Search for ]]> </b:skin> (Hint: Click anywhere in the code and press CTRL + F for find box to appear! ) 
  • Now above that tag paste the following CSS code.
/*Styling Youtube Video Slider Widget TopEarningBoy*/ 

.YOUTUBE-iframe-video{border-radius:6px;}

.bt{ margin-top:2%; width:320px;}

.w3-button{border:none; 
  color:#aaa;
  background-color:#f1f1f1!important; 
  display:inline-block; padding:3px 15px; 
  margin:0 3px; height:auto;width: auto;
font-size: 12px;text-align:center;
  cursor:pointer;border-radius:3px;}

.w3-light-grey{color:#aaa!important;background-color:#f1f1f1!important}

.w3-button:hover{color:#f16334!important;background-color:#ccc!important}

.w3-red{color:#fff!important;background-color:#aaa!important}

#tebloading{
  
  margin: 20% auto;
  
  background: url('https://1.bp.blogspot.com/-kSD0EuAOj9g/WyVcTB9Q2GI/AAAAAAAACXo/JDQSVI65RR8MSgG6KBfCv454OMQZf4QXQCLcBGAs/s1600/img-loader.gif') no-repeat left center;width: 80px;height: 80px;
}   
         
  • Save your template ( but we aren't done yet! )
  • On your Blogger dashboard click on Layout
  • At your sidebar section click Add a Gadget
  • Select HTML/JavaScript gadget 
  • In the content field add the following JavaScript Code
<!--  Youtube video slider widget topearningboy.com -->

<div id="tebloading"></div>
<script type="text/javascript">
   
  function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  
  var x =document.getElementsByClassName("mySlides");
  
  var dots = document.getElementsByClassName("dots");
  
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-red";
}

   function tebtube(json) {
     var listing="";
          
  for (var i = 0; i < json.items.length; i++)       
{
  var videoid = json.items[i].id.videoId;

  var thumbnail = json.items[i].snippet.thumbnails.high.url;

listing += "<div><iframe width='320' height='266' class='YOUTUBE-iframe-video mySlides' data-thumbnail-src='" + thumbnail + "' src='https://www.youtube.com/embed/" + videoid + "?feature=player_embedded&controls=0&rel=0&showinfo=0'" + "frameborder='0'allowfullscreen></iframe></div>" }
     
 document.write(listing);
     
 document.write("<div class='bt'><button class='w3-button w3-light-grey' onclick='plusDivs(-1)'>❮</button><button class='w3-button dots' onclick='currentDiv(1)'>1</button><button class='w3-button dots' onclick='currentDiv(2)'>2</button><button class='w3-button dots' onclick='currentDiv(3)'>3</button><button class='w3-button dots' onclick='currentDiv(4)'>4</button><button class='w3-button dots' onclick='currentDiv(5)'>5</button><button class='w3-button w3-light-grey' onclick='plusDivs(1)'>❯</button></div>");
   
   }
    
 </script>


 <script type="text/javascript" src="https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=Channel ID&maxResults=5&order=date&type=video&key= API key
&callback=tebtube">     
</script>

<script type="text/javascript">

  var slideIndex = 1;

  showDivs(slideIndex);

</script>

<script>document.getElementById("tebloading").style.display = "none";</script>      
  • Replace Channel ID with your YouTube channel ID
  • Replace API key with your requested API key 
  • Replace 5 with the no. of videos you want to display but for that you will have to customize slider as well 
  • Save and we are done!
 
Disclaimer: All rights belong to TopEarningBoy. You may not modify, publish, distribute any type of content without our prior written consent from Copyright Owner.

Need help?

This is a cool widget for Blogger that you would never find online so don't forget to add it in your Blogger blogs. Now it's time for you all to ask questions as many as you can and I would love to answer. Share this widget with your friends too using our floating social share buttons. Thanks for taking out time and reading my tutorials. Peace!

 
If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

No comments:

Powered by Blogger.