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'