Chat with us, powered by LiveChat

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">


  YouTube Embed Code
  Author:   Amit Agarwal 
  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 = "//";
  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) { { 
      videoId: videoID,
      startSeconds: startTime,
      endSeconds: endTime