X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Froot-helpers%2Fvideo.ts;h=01feddbdc2a868a51431523637f74306f85543fc;hb=44ba8aaa4b9a89624502debdb353ed8ec64a4dc5;hp=107ba1eba704658bccf2fcefccf7e8911820f891;hpb=b1dbb9fefc870a90b25f5c0153589f45c9e75e3e;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts
index 107ba1eba..01feddbdc 100644
--- a/client/src/root-helpers/video.ts
+++ b/client/src/root-helpers/video.ts
@@ -3,19 +3,34 @@ import { HTMLServerConfig, Video, VideoPrivacy } from '@shared/models'
 function buildVideoOrPlaylistEmbed (options: {
   embedUrl: string
   embedTitle: string
+  responsive?: boolean
 }) {
-  const { embedUrl, embedTitle } = options
+  const { embedUrl, embedTitle, responsive = false } = options
 
   const iframe = document.createElement('iframe')
 
   iframe.title = embedTitle
-  iframe.width = '560'
-  iframe.height = '315'
+  iframe.width = responsive ? '100%' : '560'
+  iframe.height = responsive ? '100%' : '315'
   iframe.src = embedUrl
   iframe.frameBorder = '0'
   iframe.allowFullscreen = true
   iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
 
+  if (responsive) {
+    const wrapper = document.createElement('div')
+
+    wrapper.style.position = 'relative'
+    wrapper.style['padding-top'] = '56.25%'
+
+    iframe.style.position = 'absolute'
+    iframe.style.inset = '0'
+
+    wrapper.appendChild(iframe)
+
+    return wrapper.outerHTML
+  }
+
   return iframe.outerHTML
 }