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
start/end: whole seconds from the beginning of the video. The section plays once and stops.loop=1: needsplaylistset to the same video ID, and YouTube notes it has limited support in IFrame embeds.- Looping a section: needs code (the IFrame Player API) or a looping embed.
- In the API,
seekTo()cancelsendSeconds. Reload the section withloadVideoById()instead. - Videos with embedding turned off cannot be embedded by any of these methods.
What the embed parameters do
| Embed URL | What 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:
loadVideoById, notseekTo. YouTube’s reference says that once you callseekTo(),endSecondsis no longer in effect, so a loop built on seeking plays straight past the end point on the second pass.- The function comes before the API script, so it already exists when the API calls it.
playsinline: 1keeps the video in the page on iPhones instead of going fullscreen.
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
- Make the loop on ClipBack: paste the video, set the start and end, give it a title and create it.
- Open the loop’s page and click Embed.
- 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> - Paste it into your page, blog post or site builder’s HTML block.
What you get:
- The section repeats without reloading the player each time, and at the speed it was saved at, so a slowed practice loop stays slow.
- Nothing loads from Google until the visitor clicks play. The preview image comes from clipback.tv and the YouTube player is only built after the click. For sites that follow EU consent rules, that is one less thing to put behind a cookie banner.
- The video still plays through YouTube’s own player, so views count for the creator.
- No ClipBack ads in the embed.
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 section | No | Yes | Yes |
| Code to write | None | About 15 lines | None |
| Reloads at each repeat | – | Yes, with a short pause | No |
| Saved speed | No | If you add it | Yes |
| Loads Google before the click | Yes | Yes | No |
| Section length | Any | Any | Any, 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
- YouTube Embedded Players and Player Parameters (
start,end,loop,playlist) - YouTube IFrame Player API reference (
loadVideoById,seekTo,onStateChange)