From 9fb83409ccfca06b5e8e213a3e9ceb833af16f5a Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sat, 4 Feb 2023 14:27:57 +0100
Subject: [PATCH] fix(frontend): Fix ratio of youtube frame

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../youtube/__snapshots__/youtube-frame.test.tsx.snap          | 3 +--
 .../extensions/extra-integrations/youtube/youtube-frame.tsx    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/extensions/extra-integrations/youtube/__snapshots__/youtube-frame.test.tsx.snap b/frontend/src/extensions/extra-integrations/youtube/__snapshots__/youtube-frame.test.tsx.snap
index 3bc17565f..a0521e209 100644
--- a/frontend/src/extensions/extra-integrations/youtube/__snapshots__/youtube-frame.test.tsx.snap
+++ b/frontend/src/extensions/extra-integrations/youtube/__snapshots__/youtube-frame.test.tsx.snap
@@ -5,11 +5,10 @@ exports[`YoutubeFrame renders a click shield 1`] = `
   <span>
     This is a click shield for 
     <span
-      class="embed-responsive embed-responsive-16by9"
+      class="ratio ratio-16x9 d-inline-block"
     >
       <iframe
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        class="embed-responsive-item"
         src="https://www.youtube-nocookie.com/embed/validYoutubeId?autoplay=1"
         title="youtube video of validYoutubeId"
       />
diff --git a/frontend/src/extensions/extra-integrations/youtube/youtube-frame.tsx b/frontend/src/extensions/extra-integrations/youtube/youtube-frame.tsx
index 33cef9761..103dba162 100644
--- a/frontend/src/extensions/extra-integrations/youtube/youtube-frame.tsx
+++ b/frontend/src/extensions/extra-integrations/youtube/youtube-frame.tsx
@@ -20,9 +20,8 @@ export const YouTubeFrame: React.FC<IdProps> = ({ id }) => {
       fallbackPreviewImageUrl={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}
       fallbackBackgroundColor={'#ff0000'}
       data-cypress-id={'click-shield-youtube'}>
-      <span className={'embed-responsive embed-responsive-16by9'}>
+      <span className={'ratio ratio-16x9 d-inline-block'}>
         <iframe
-          className='embed-responsive-item'
           title={`youtube video of ${id}`}
           src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
           allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'