We all know youtube is the best platform to promote your skills and create your own youtube channel without any cost. Adding youtube video on your website is easy just grab the official youtube video iframe code and paste any where in your blog or website where you want to display it.
But if you are looking for more customization then you have to add youtube iframe api with custom parameter with these parameter you can control youtube palyer like auto play when player loaded, hide youtube logo, hide video controls and many more. Suppose you have a food blog and also have youtube channel and you want add your youtube video on your food blog with extra controls then use below youtube iframe api.
Step:1- Create html page with player div container.
Step:2- Loads the IFrame Player API code asynchronously
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
Step:3- Below function creates an iframe (and YouTube player) after the API code downloads.
<script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'YOUTUBE_VIDEO_ID', // Get from youtube video URL playerVars: { autoplay: 1, // Auto-play the video on load controls: 1, // Show / Hide pause/play buttons showinfo: 0, // Show / Hide the video title modestbranding: 1, // Show / Hide the Youtube Logo loop: 1, // Run the video in a loop fs: 0, // Show / Hide the full screen button autohide: 0 // Show / Hide video controls when playing }, events: { 'onReady': function () { event.target.playVideo(); }, 'onStateChange': function () { } } }); } script> |
Don’t forget to add youtube video id, you can get from youtube site while playing video copy id from url like https://www.youtube.com/watch?v=Gp3N5wUEz_I in this url youtube id is Gp3N5wUEz_I
Step:4- In the events method you can create player’s events like onReady, onStateChange etc.
onReady: The API will call this function when the video player is ready.
onPlayerStateChange: The API calls this function when the player’s state changes
Complete code..
index.html
DOCTYPE html>
<html>
<body>
<div id="player">div>
<script>
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YOUTUBE_VIDEO_ID', // Get from youtube video URL
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show / Hide pause/play buttons
showinfo: 0, // Show / Hide the video title
modestbranding: 1, // Show / Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Show / Hide the full screen button
autohide: 0 // Show / Hide video controls when playing
},
events: {
'onReady': function () { event.target.playVideo(); },
'onStateChange': function () { }
}
});
}
script>
body>
html>
|