Embed youtube video on your website / blog with custom controls

by Posted on

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', // 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>
    <!--  The <iframe> (and video player) will replace this <div> tag. -->
    <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>

DEMO

DOWNLOAD

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

Published by admin