update component

src/_includes/webc/custom-peertube.webc

@@ -3,29 +3,52 @@
     return `https://${instance}/w/${slug}${start ? `?start=${start}s` : ''}`;
   }
   function getEmbedLinkUrl(instance, embedSlug, start) {
-    return `https://${instance}/videos/embed/${embedSlug}${start ? `?start=${start}s&` : `?`}` + `title=0&warningTitle=0`;
+    const startParam = start ? `start=${start}s&` : '';
+    return `https://${instance}/videos/embed/${embedSlug}?${startParam}title=0&warningTitle=0`;
   }
 </script>
+
 <style>
-  custom-peertube div {
-    position: relative;
-    overflow: hidden;
-    padding-top: 56.25%;
-    border-radius: 1rem;
+  /* Hide without JS */
+  is-land:not(:defined).video-wrapper {
+    display: none;
   }
+
+  is-land.video-wrapper {
+    display: block;
+  }
+
   custom-peertube iframe {
-    position: absolute; 
+    position: absolute;
     inset: 0px;
     width: 100%;
     height: 100%;
   }
+
+  custom-peertube .video-wrapper {
+    overflow: hidden;
+    position: relative;
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    border-radius: 0.2em;
+  }
 </style>
 
 <custom-peertube webc:root class="flow">
-  <div>
-      <iframe :title="label" :src="getEmbedLinkUrl(instance,embedSlug,start)" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
-      </iframe>
-  </div>
+  <is-land on:visible class="video-wrapper relative">
+    <iframe
+      :title="label"
+      :src="getEmbedLinkUrl(instance,embedSlug,start)"
+      frameborder="0"
+      allowfullscreen
+      sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+    >
+    </iframe>
+  </is-land>
 </custom-peertube>
 
-<custom-peertube-link @raw="label" :label="label" :href="getLinkUrl(instance,slug, start)"></custom-peertube-link>
+<custom-peertube-link
+  @raw="label"
+  :label="label"
+  :href="getLinkUrl(instance,slug, start)"
+></custom-peertube-link>