Add an option to provide responsive embed (#5690)

* Add option to provide responsive embed

* Fix typo

* More understandable parameter

1 files changed, 18 insertions, 3 deletions

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
 }