diff --git a/packages/youtube-video-element/test/test.js b/packages/youtube-video-element/test/test.js
index c0fc1e0..59e9a4b 100644
--- a/packages/youtube-video-element/test/test.js
+++ b/packages/youtube-video-element/test/test.js
@@ -250,6 +250,67 @@ test('t parameter - case insensitive', async function (t) {
   t.equal(startParam, '171', 'start parameter is set from uppercase T parameter');
 });
 
+test('destroys the player when disconnected', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  t.ok(video.api, 'has a player once loaded');
+  t.ok(video.shadowRoot.querySelector('iframe'), 'has an iframe once loaded');
+
+  video.remove();
+
+  t.equal(video.api, null, 'the player reference is released on disconnect');
+  t.equal(video.isLoaded, false, 'the element is no longer marked loaded');
+  t.equal(
+    video.shadowRoot.querySelector('iframe'),
+    null,
+    'destroy() removed the iframe from the shadow root'
+  );
+});
+
+test('creates a new player when reconnected', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  const firstApi = video.api;
+  video.remove();
+  document.body.append(video);
+
+  await video.loadComplete;
+
+  t.ok(video.api, 'has a player again after reconnecting');
+  t.ok(video.api !== firstApi, 'a new player was created, not the destroyed one');
+  t.ok(video.shadowRoot.querySelector('iframe'), 'the iframe was rebuilt');
+});
+
+test('disconnecting mid-load does not build a player afterwards', async function (t) {
+  const video = await createVideoElement();
+  // Disconnect while load() is still awaiting the API script.
+  video.remove();
+
+  // Let that in-flight continuation actually resume before asserting;
+  // immediately after remove() api === null is true by construction.
+  for (let i = 0; i < 500 && !globalThis.YT?.Player; i++) await delay(10);
+  await delay(100);
+
+  t.equal(video.api, null, 'the superseded load did not construct a player');
+});
+
+test('disconnecting before ready settles the pending loadComplete', async function (t) {
+  const video = await createVideoElement();
+  const pending = video.loadComplete;
+
+  // Disconnect after the player is constructed but before onReady fires.
+  for (let i = 0; i < 500 && !video.api; i++) await delay(10);
+  video.remove();
+
+  const outcome = await Promise.race([
+    pending.then(() => 'resolved', (err) => err.name),
+    delay(3000).then(() => 'pending'),
+  ]);
+  t.ok(outcome !== 'pending', `loadComplete settles after disconnect (${outcome})`);
+});
+
 function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js
index 75958db..7fadea9 100644
--- a/packages/youtube-video-element/youtube-video-element.js
+++ b/packages/youtube-video-element/youtube-video-element.js
@@ -147,6 +147,9 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
   loadComplete = new PublicPromise();
   #loadRequested;
   #hasLoaded;
+  #wasDisconnected = false;
+  #loadId = 0;
+  #timers = [];
   #readyState = 0;
   #seeking = false;
   #seekComplete;
@@ -172,6 +175,12 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
   async load() {
     if (this.#loadRequested) return;
 
+    // Identifies this load attempt. `load()` awaits the API script, so the
+    // element can be disconnected (or asked to load again) while this one is
+    // still in flight; those bump #loadId and this attempt bails out below
+    // instead of attaching a player nothing will ever destroy.
+    const loadId = ++this.#loadId;
+
     if (!this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
     }
@@ -193,12 +202,13 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
 
     let oldApi = this.api;
     this.api = null;
+    // A new player is always constructed below, so the previous one is never
+    // reused. Release it rather than just dropping the reference, otherwise it
+    // stays in the API's registries holding its (now discarded) iframe.
+    // Removes the <iframe> containing the player.
+    oldApi?.destroy();
 
-    if (!this.src) {
-      // Removes the <iframe> containing the player.
-      oldApi?.destroy();
-      return;
-    }
+    if (!this.src) return;
 
     this.#textTracksVideo = document.createElement('video');
     this.textTracks = this.#textTracksVideo.textTracks;
@@ -223,6 +233,10 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     }
 
     const YT = await loadScript(API_URL, API_GLOBAL, API_GLOBAL_READY);
+
+    // Superseded by a disconnect or a newer load() while awaiting the API.
+    if (loadId !== this.#loadId) return;
+
     this.api = new YT.Player(iframe, {
       events: {
         onReady: () => {
@@ -326,10 +340,18 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
       this.dispatchEvent(new Event('timeupdate'));
     });
 
-    await this.loadComplete;
+    // Rejected if the element disconnects before onReady; the #loadId check
+    // below then bails.
+    await this.loadComplete.catch(noop);
+
+    // Superseded while awaiting loadComplete; don't start pollers for a player
+    // that is already gone.
+    if (loadId !== this.#loadId) return;
+
+    this.#clearTimers();
 
     let lastCurrentTime = 0;
-    setInterval(() => {
+    this.#timers.push(setInterval(() => {
       const diff = Math.abs(this.currentTime - lastCurrentTime);
       const bufferedEnd = this.buffered.end(this.buffered.length - 1);
       if (this.seeking && bufferedEnd > 0.1) {
@@ -341,7 +363,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
         this.dispatchEvent(new Event('seeking'));
       }
       lastCurrentTime = this.currentTime;
-    }, 50);
+    }, 50));
 
     let lastBufferedEnd;
     const progressInterval = setInterval(() => {
@@ -355,6 +377,51 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
         this.dispatchEvent(new Event('progress'));
       }
     }, 100);
+    this.#timers.push(progressInterval);
+  }
+
+  #clearTimers() {
+    for (const id of this.#timers) clearInterval(id);
+    this.#timers = [];
+  }
+
+  connectedCallback() {
+    // `load()` is only triggered by attributeChangedCallback, so an element that
+    // is moved in the DOM (disconnected and reconnected without its attributes
+    // changing) has to ask for a new player itself.
+    if (this.#wasDisconnected) {
+      this.#wasDisconnected = false;
+      this.load();
+    }
+    super.connectedCallback?.();
+  }
+
+  disconnectedCallback() {
+    this.#wasDisconnected = true;
+    this.#loadId++;
+    this.#clearTimers();
+    this.#loadRequested = null;
+    this.#hasLoaded = null;
+    this.isLoaded = false;
+    // Settle anything still awaiting this load (play(), pause(), queued
+    // setters, user code) rather than leaving it pending forever. AbortError
+    // is what HTMLMediaElement.play() rejects with when interrupted. A no-op
+    // if the load already completed. The catch only marks the promise as
+    // handled so a disconnect with nothing awaiting doesn't surface as an
+    // unhandled rejection; actual awaiters still receive it.
+    const pending = this.loadComplete;
+    pending.catch(noop);
+    pending.reject(
+      new DOMException('Disconnected before load completed', 'AbortError')
+    );
+    this.loadComplete = new PublicPromise();
+    // The YouTube iframe API holds a reference to every player it creates, so
+    // dropping the element is not enough to release the <iframe>: it stays
+    // detached but reachable from window.YT. destroy() removes the iframe and
+    // deregisters the player.
+    this.api?.destroy?.();
+    this.api = null;
+    super.disconnectedCallback?.();
   }
 
   async attributeChangedCallback(attrName, oldValue, newValue) {
@@ -467,7 +534,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
           this.api?.pauseVideo();
         });
       }
-    });
+    }, noop);
   }
 
   set defaultMuted(val) {
@@ -492,7 +559,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     if (this.muted == val) return;
     this.loadComplete.then(() => {
       val ? this.api?.mute() : this.api?.unMute();
-    });
+    }, noop);
   }
 
   get muted() {
@@ -508,7 +575,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     if (this.playbackRate == val) return;
     this.loadComplete.then(() => {
       this.api?.setPlaybackRate(val);
-    });
+    }, noop);
   }
 
   get playsInline() {
@@ -534,7 +601,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     this.#initialVolume = val;
     this.loadComplete.then(() => {
       this.api?.setVolume(val * 100);
-    });
+    }, noop);
   }
 
   get volume() {
@@ -621,6 +688,8 @@ async function loadScript(src, globalName, readyFnName) {
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+const noop = () => {};
+
 function promisify(fn) {
   return (...args) =>
     new Promise((resolve) => {