How to embed a YouTube video that loops one section

Updated

YouTube’s embed parameters cannot reliably loop a section. start and end play a section once, and loop=1 (which only works together with playlist=VIDEO_ID) is documented as repeating the video, with no mention of start or end points. To embed a section that repeats, either add a few lines of JavaScript using YouTube’s IFrame Player API, which reloads the section each time it ends, or use an embed that loops the section for you, such as a ClipBack embed, which is a single <iframe>.

Key facts

What the embed parameters do

Embed URLWhat happens
/embed/ID?start=30&end=45 Plays 0:30 to 0:45 once, then stops.
/embed/ID?loop=1&playlist=ID Repeats the whole video.
/embed/ID?loop=1 without playlist Does not loop.
/embed/ID?start=30&end=45&loop=1&playlist=ID Not documented. YouTube describes loop for whole videos only, so do not count on it repeating 0:30 to 0:45.

end counts from the beginning of the video, not from start: start=30&end=45 is a 15-second section. For the times themselves, see converting times to seconds.

Option 1: loop a section with the IFrame Player API

YouTube’s IFrame Player API tells your page when the video ends. At that moment, load the same section again. Paste this where the video should appear, and change the three values on the first line of the script:

<div id="player"></div>
<script>
  var VIDEO_ID = 'dQw4w9WgXcQ', START = 30, END = 45;
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: VIDEO_ID,
      playerVars: { start: START, end: END, playsinline: 1 },
      events: {
        onStateChange: function (event) {
          if (event.data === YT.PlayerState.ENDED) {
            player.loadVideoById({ videoId: VIDEO_ID, startSeconds: START, endSeconds: END });
          }
        }
      }
    });
  }
</script>
<script src="https://www.youtube.com/iframe_api"></script>

Why it is written this way:

The catch is a short pause at every repeat while the player reloads the section, which is noticeable on a loop of a few seconds. Avoiding it means polling the current time and seeking back just before the end point, and dealing with the player’s coarse time reporting. That is doable, but it is more code to maintain.

Option 2: a looping embed, no code

  1. Make the loop on ClipBack: paste the video, set the start and end, give it a title and create it.
  2. Open the loop’s page and click Embed.
  3. Pick a size and click Copy Code. You get one line: <iframe src="https://clipback.tv/embed/…" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  4. Paste it into your page, blog post or site builder’s HTML block.

What you get:

Sign in before you create a loop you plan to embed. Loops made without an account are removed after 30 days without views, and the embed would stop working with them.

Which to use

Embed parameters IFrame Player API ClipBack embed
Loops a sectionNoYesYes
Code to writeNoneAbout 15 linesNone
Reloads at each repeat–Yes, with a short pauseNo
Saved speedNoIf you add itYes
Loads Google before the clickYesYesNo
Section lengthAnyAnyAny, free

Frequently asked questions

Does loop=1 work with start and end?

YouTube does not say it does. Its documentation describes loop as playing the video again and again, with limited support in IFrame embeds, and says nothing about start or end. To repeat a section reliably, use a few lines of the IFrame Player API or an embed that loops the section for you.

Why do I need playlist=VIDEO_ID for loop to work?

Because YouTube's embedded player only repeats a single video when the playlist parameter is set to that same video ID. Without it, loop=1 has no effect.

Why is there a pause each time my API loop repeats?

Reloading the section with loadVideoById makes the player buffer again. Seeking back is faster, but YouTube's documentation says a seekTo call cancels endSeconds, so you then have to watch the time and seek back just before the end yourself.

Does embedding a YouTube video load anything before the visitor presses play?

A standard YouTube embed loads the player from Google as soon as the page opens. The ClipBack embed shows its own preview image and contacts no Google server until the visitor clicks, which matters for sites that follow EU consent rules.

Sources