YouTube Player API for Partial Embeds

You can embed a part of YouTube video using the YouTube Player API. The API offers loadVideoById and cueVideoById function both of which allow you to specify a start and end time for the embedded video.

<!-- We specify the various video parameters in a DIV tag -->

<div videoID="t2MOwQ089eQ" startTime="1330" endTime="1466" height="309" width="550" id="youtube-player"></div>

<script>
  /*

  YouTube Embed Code

  Author:   Amit Agarwal
  Blog:     www.labnol.org
  Date:     04/15/2013

  */

  var node = 'youtube-player';

  // Append the YouTube IFRAME API Script
  var youtube = document.createElement('script');
  youtube.type = 'text/javascript';
  youtube.src = '//www.youtube.com/iframe_api';

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(youtube, s);

  var player;

  // Read all the parameter of the DIV tag
  var params = document.getElementById(node);

  var startTime = params.getAttribute('startTime');
  var endTime = params.getAttribute('endTime');
  var videoID = params.getAttribute('videoID');
  var playerHeight = params.getAttribute('height');
  var playerWidth = params.getAttribute('width');

  // Prepare the YouTube Player
  // We set rel=0 and showinfo=1 to hide related videos & info bar

  function onYouTubeIframeAPIReady() {
    player = new YT.Player(node, {
      height: playerHeight,
      width: playerWidth,
      playerVars: { rel: 0, showinfo: 0, hidecontrols: 1 },
      events: {
        onReady: loadVideo,
      },
    });
  }

  // When the player is ready, we load the video
  // Using cueVideoById and not loadVideoById as the
  // former function will not autoplay the video.
  function loadVideo(e) {
    e.target.cueVideoById({
      videoId: videoID,
      startSeconds: startTime,
      endSeconds: endTime,
    });
  }
</script>

Amit Agarwal is a web geek, solo entrepreneur and loves making things on the Internet. Google recently awarded him the Google Developer Expert and Google Cloud Champion title for his work on Google Workspace and Google Apps Script.

Awards & Recognition

Google Developer Expert

Google Developer Expert

Google awarded us the Developer Expert title recogizing our work in Workspace

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional title for 5 years in a row

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator award for technical expertise

Want to stay up to date?
Sign up for our email newsletter.

We will never send any spam emails. Promise 🫶🏻