Try use dangerouslySetInnerHTML again

And… fix the loop attribute value

src/components/media.jsx

@@ -426,7 +426,7 @@ function Media({
         autoplay
         muted
         playsinline
-        loop="${loopable}"
+        ${loopable ? 'loop' : ''}
         ondblclick="this.paused ? this.play() : this.pause()"
         ${
           showProgress
@@ -436,6 +436,21 @@ function Media({
       ></video>
   `;
 
+    const videoHTML = `
+      <video
+        src="${url}"
+        poster="${previewUrl}"
+        width="${width}"
+        height="${height}"
+        data-orientation="${orientation}"
+        preload="auto"
+        autoplay
+        playsinline
+        ${loopable ? 'loop' : ''}
+        controls
+      ></video>
+    `;
+
     return (
       <Figure>
         <Parent
@@ -508,21 +523,10 @@ function Media({
                 }}
               />
             ) : (
-              <div class="video-container">
+              <div
-                <video
+                class="video-container"
-                  slot="media"
+                dangerouslySetInnerHTML={{ __html: videoHTML }}
-                  src={url}
+              />
-                  poster={previewUrl}
-                  width={width}
-                  height={height}
-                  data-orientation={orientation}
-                  preload="auto"
-                  autoPlay
-                  playsinline
-                  loop={loopable}
-                  controls
-                ></video>
-              </div>
             )
           ) : isGIF ? (
             <video