Embed youtube video on your website / blog with custom controls

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.
embed-youtube-video
Step:1- Create html page with player div container.

<div id="player"></div>

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', 
           playerVars: {
            autoplay: 1,       
            controls: 1,       
            showinfo: 0,       
            modestbranding: 1, 
            loop: 1,           
            fs: 0,             
            autohide: 0        
          },
          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>
    <!--  The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <script>
      
      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', 
           playerVars: {
            autoplay: 1,       
            controls: 1,       
            showinfo: 0,       
            modestbranding: 1, 
            loop: 1,           
            fs: 0,             
            autohide: 0        
          },
          events: {
            'onReady': function () {  event.target.playVideo();  },
            'onStateChange': function () { }
          }
        });
      }
    </script>
  </body>
</html>

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff