This article will show you how to install youtube API for your website or blog. 

 

English Tutorial : https://youtu.be/xL2ivAM0lD0
Arabic Tutorial  :  https://youtu.be/f5z_axUxp_k
 

Part A: Installation

To install youtube API,Save this code in new PHP/HTML file, include it in your website : 


<script>

var cid=""; 
var total=""; 
var randfrom=""; 
var width=""; 
var align=""; 
var rand=""; 

var theme=""; 
var animation=""; 
var close_animation=""; 
var Khalil_Shreateh=new XMLHttpRequest(); 
Khalil_Shreateh.open("GET","https://shreateh-youtube-videos-api.herokuapp.com/?cid="+cid+"&total="+total+"&rand="+rand+"&randfrom="+randfrom+"&width="+width+"&align="+align+"&theme="+theme+"&animation="+animation+"&close_animation="+close_animation,false);
Khalil_Shreateh.send(); 
document.write(Khalil_Shreateh.responseText);

</script>

 

- API variables should sent after "?" , separated by "&"

- Custom $url variables depend on your need, check Part B  . 

 

Part B: Varialbes

Youtube API Variables
Variable Information Demo
cid Youtube Channel ID, Click here to get it yours .
Default value: UC99SyRo6rKHyHWpC_jZq7Kg		 Demo
total Total video to display, number between (1-5) . 
Default value: 1, Maximum Videos: 5. (contact me for more)		 Demo
randfrom

To choose videos from your latest upload. for example: if you set total = 3, randomfrom = 10, the API will pick up random 3 videos from your latest 10 videos . 
Default value: 50

 Demo
width Display width . 
Default value = 200px		 Demo
align Set "align" to "h" if you want to display videos horizontally. Demo
rand Set "rand" to "off" if you want to display channel latest videos  . 
Default value: random		 Demo
 
Javascript Display Variables
Variable Information Demo
theme Available themes: (white, black, hololight, holodark, supervan) . 
Default value: black		 Demo
animation Available animations:(right, left, bottom, top, rotate, none, opacity, scale, zoom, scaley, scalex, rotatey, rotatex) . 
Default value: rotate		 Demo
close_animation

Available animations:(right, left, bottom, top, rotate, none, opacity, scale, zoom, scaley, scalex, rotatey, rotatex) . 
Default value: scaley

 Demo