From cadc1a1b0b1f8c22afbf31cb07759706131f29c4 Mon Sep 17 00:00:00 2001
From: Wicklow <123956049+wickloww@users.noreply.github.com>
Date: Tue, 14 Mar 2023 08:32:16 +0000
Subject: Add an option to provide responsive embed (#5690)

* Add option to provide responsive embed

* Fix typo

* More understandable parameter
---
 client/src/root-helpers/video.ts | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

(limited to 'client/src/root-helpers/video.ts')

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
 }
 
-- 
cgit v1.2.3