Embed LoopTube

Want a snippet for a specific video? The embed builderwrites it for you, with a live preview. This page is the reference for everything the embed accepts. Using Notion? You don't need any code: paste the link.

Quick start

Paste this into any page and replace the video ID. It loops seconds 10 to 30 at 70% tempo in the dark theme.

<div style="max-width:100%;width:640px">
  <iframe
    src="https://www.looptube.xyz/embed/dQw4w9WgXcQ?start=10&end=30&tempo=70&theme=dark"
    width="100%"
    height="820"
    style="border:0;border-radius:12px;display:block"
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
  <p style="margin:6px 0 0;font:13px/1.4 system-ui,sans-serif;text-align:right">Loop &amp; slow down YouTube videos with <a href="https://www.looptube.xyz/">LoopTube</a></p>
</div>
<script src="https://www.looptube.xyz/embed-resize.js" async></script>

The last line is optional: it is the resize script, which fits the iframe to its content.

Paste a link into Notion

In Notion, paste a LoopTube link into a page and choose Create embed. The looper appears in the page with the loop, sections, tempo and theme the link carries. These links all work: the address bar while you're using the app, a Share link, or an embed URL from the builder.

Notion starts embeds at a fixed size, so the controls under the video can be cut off. Drag a side handle to make the embed wider: it keeps its shape as it grows, so it gets taller too, until the controls fit.

Building an integration of your own? The same thing works through oEmbed, the standard apps use to turn a link into a player:

https://www.looptube.xyz/api/oembed?url=LOOPTUBE_LINK&maxwidth=640

URL parameters

Every parameter is optional except the video ID. Anything invalid falls back to its default, so a typo never breaks a page that already has the embed on it.

Attribution.The “Loop and slow down with LoopTube” footer is shown on every embed. It can't be switched off with a parameter; hosts that need it removed can get in touch.

Modes

controls and playback decide how much of the looper your viewers get. Each example below uses three sections; copy the src into the iframe from the quick start.

https://www.looptube.xyz/embed/dQw4w9WgXcQ?segments=0,8,Intro|8,16,Verse|16,24,Chorus

https://www.looptube.xyz/embed/dQw4w9WgXcQ?segments=0,8,Intro|8,16,Verse|16,24,Chorus&controls=minimal

https://www.looptube.xyz/embed/dQw4w9WgXcQ?segments=0,8,Intro|8,16,Verse|16,24,Chorus&controls=locked

https://www.looptube.xyz/embed/dQw4w9WgXcQ?segments=0,8,Intro|8,16,Verse|16,24,Chorus&controls=locked&playback=0

Colours and themes

theme picks light, dark or auto (each viewer's operating system decides). brandColor sets the accent used for the Play button, active chips, flags and sliders; text in that colour is adjusted automatically so it stays readable on both themes, and buttons that sit too close to the background get an outline. bgColor sets the page background inside the iframe.

https://www.looptube.xyz/embed/VIDEO_ID?theme=auto&brandColor=fde047&bgColor=ffffff

Sizing the iframe

The embed is responsive to the width of its iframe (it adapts at 360, 480 and 640px and works down to 320px). Its height depends on the mode, so it reports it to your page:

• Easiest: add <script src="https://www.looptube.xyz/embed-resize.js" async></script>. It finds the iframe and sets its height whenever it changes, and fixes to the script reach every page that uses it.
• Or listen yourself. The embed posts { type: 'looptube:height', height } to the parent window:

window.addEventListener('message', function (e) {
  if (!e.data || e.data.type !== 'looptube:height') return;
  // match the iframe that sent it, then size it
  document.querySelectorAll('iframe').forEach(function (f) {
    if (f.contentWindow === e.source) f.height = e.data.height;
  });
});

Your own section buttons

The simplest way to offer several sections is the segments parameter: the embed shows the chips for you. If you would rather build the buttons on your own page, change start and end on the iframe:

<iframe id="player" width="100%" height="820" style="border:0"
  src="https://www.looptube.xyz/embed/YOUR_VIDEO_ID?start=0&end=10&tempo=70"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>

<button data-start="0"  data-end="10">Intro</button>
<button data-start="10" data-end="30">Verse 1</button>
<button data-start="30" data-end="45">Chorus</button>

<script>
  document.querySelectorAll('button[data-start]').forEach(function (b) {
    b.addEventListener('click', function () {
      var f = document.getElementById('player');
      var u = new URL(f.src);
      u.searchParams.set('start', b.dataset.start);
      u.searchParams.set('end', b.dataset.end);
      u.searchParams.set('autoplay', '1'); // optional; browsers may still block it
      f.src = u.toString();
    });
  });
</script>

The older URL form

Embeds that use https://www.looptube.xyz/embed?vid=VIDEO_IDkeep working and won't change, including their own defaults: the dark theme, tempo as a multiplier (0.7 means 70%), and the tempo slider hidden unless showControls=true. New embeds should use the path form above. The older form doesn't report its height.

Good to know

• Keyboard shortcuts (Space to play or pause, arrow keys to skip) work while the embed has focus.
• Browsers often block autoplay until the visitor has interacted with the page, so treat it as a hint.
• We count embed loads and which sites host them, to understand usage. Nothing about your visitors is stored by the embed beyond that.

Perfect for

Need help?

Email info@looptube.xyz. The embed is free to use and needs no API key.