diff --git a/index.html b/index.html
index 007456a..0e8fe46 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,38 @@
 <html lang="en" dir="ltr">
   <head>
     <title>HLS Video Element</title>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
+    <style>
+      hls-video {
+        display: block;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #000;
+      }
+    </style>
+
     <script type="module" src="./dist/hls-video-element.js"></script>
   </head>
   <body>
 
     <h2>On-demand</h2>
     <hls-video
+      id="video1"
       controls
       src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8"
       crossorigin
     >
       <track label="thumbnails" id="customTrack" default kind="metadata" src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"></track>
     </hls-video>
+    <br>
+
+    <button id="loadbtn">Load new clip</button>
+    <script type="module">
+      loadbtn.onclick = () => {
+        video1.src = 'https://stream.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM.m3u8';
+      };
+    </script>
 
     <h2>Live</h2>
     <hls-video
diff --git a/index.js b/index.js
index 8a83e63..404f562 100644
--- a/index.js
+++ b/index.js
@@ -1,72 +1,52 @@
-// Web Components: Extending Native Elements, A working example
-
 import { CustomVideoElement } from 'custom-media-element';
 import Hls from 'hls.js';
 
 class HLSVideoElement extends CustomVideoElement {
-  constructor() {
-    super();
-  }
 
-  get src() {
-    // Use the attribute value as the source of truth.
-    // No need to store it in two places.
-    // This avoids needing a to read the attribute initially and update the src.
-    return this.getAttribute('src');
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName !== 'src') {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+
+    if (attrName === 'src' && oldValue != newValue) {
+      this.load();
+    }
   }
 
-  set src(val) {
-    // If being set by attributeChangedCallback,
-    // dont' cause an infinite loop
-    if (val !== this.src) {
-      this.setAttribute('src', val);
+  #destroy() {
+    if (this.api) {
+      this.api.detachMedia();
+      this.api.destroy();
+      this.api = null;
     }
   }
 
   load() {
+    this.#destroy();
+
+    if (!this.src) {
+      return;
+    }
+
     if (Hls.isSupported()) {
-      var hls = new Hls({
-        // Kind of like preload metadata, but causes spinner.
-        // autoStartLoad: false,
 
-        // Mimic the media element with an Infinity duration
-        // for live streams
+      this.api = new Hls({
+        // Mimic the media element with an Infinity duration for live streams.
         liveDurationInfinity: true
       });
 
-      hls.loadSource(this.src);
-      hls.attachMedia(this.nativeEl);
+      this.api.loadSource(this.src);
+      this.api.attachMedia(this.nativeEl);
+
     } else if (this.nativeEl.canPlayType('application/vnd.apple.mpegurl')) {
+
       this.nativeEl.src = this.src;
     }
   }
-
-  // play() {
-  //   if (this.readyState === 0 && this.networkState < 2) {
-  //     this.load();
-  //     this.hls.on(Hls.Events.MANIFEST_PARSED,function() {
-  //     video.play();
-  //
-  //     return this.nativeEl.play();
-  //   }
-  // }
-
-  connectedCallback() {
-    this.load();
-
-    // Not preloading might require faking the play() promise
-    // so that you can call play(), call load() within that
-    // But wait until MANIFEST_PARSED to actually call play()
-    // on the nativeEl.
-    // if (this.preload === 'auto') {
-    //   this.load();
-    // }
-  }
 }
 
-if (!window.customElements.get('hls-video')) {
-  window.customElements.define('hls-video', HLSVideoElement);
-  window.HLSVideoElement = HLSVideoElement;
+if (globalThis.customElements && !globalThis.customElements.get('hls-video')) {
+  globalThis.customElements.define('hls-video', HLSVideoElement);
 }
 
 export default HLSVideoElement;
