From cb5ae8f35496165c639b5a666d519af3ce19860a Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Mon, 28 Mar 2022 16:02:23 +0200
Subject: [PATCH] make backstage.io/live responsive

Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>
---
 microsite/pages/en/live.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/microsite/pages/en/live.js b/microsite/pages/en/live.js
index 0cde700697..90f7d359ca 100644
--- a/microsite/pages/en/live.js
+++ b/microsite/pages/en/live.js
@@ -30,26 +30,24 @@ const Background = props => {
         </Block.Container>
       </Block>
 
-      <Block className="stripe bg-black">
+      <Block className="stripe bg-black" >
         <Block.Container style={{ justifyContent: 'flex-start' }}>
-          <Block.Paragraph>
+          <Block.MediaFrame >
             <iframe
-              width="1280"
-              height="720"
               src="https://www.youtube.com/embed/mFi_X58igzk"
               title="YouTube video player"
               frameborder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen
             ></iframe>
-          </Block.Paragraph>
-          <Block.TextBox>
+          </Block.MediaFrame>
+          <Block.MediaFrame >
             <iframe
+              width="300"
+              height="500"
               src="https://www.youtube.com/live_chat?v=mFi_X58igzk&embed_domain=backstage.io&dark_theme=1"
-              width="400px"
-              height="680px"
             ></iframe>
-          </Block.TextBox>
+          </Block.MediaFrame>
         </Block.Container>
       </Block>