Make the YouTube embed responsive

thanks to tjallingt/react-youtube#242
danfishgold · Jul 9, 2021 · e91cce9 · e91cce9
1 parent 51c50f0
commit e91cce9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/client/src/components/Player.tsx b/client/src/components/Player.tsx
@@ -31,7 +31,8 @@ export default function Player({ firstPlaylistSong, onEnd }: Props) {
         videoId={currentlyPlaying?.videoId}
         onReady={onReady}
         onEnd={onEnd}
-        opts={{ playerVars: { autoplay: 1 } }}
+        opts={{ width: '100%', height: 'auto', playerVars: { autoplay: 1 } }}
+        containerClassName={'youtubeContainer'}
       />
     </div>
   )

diff --git a/client/src/index.scss b/client/src/index.scss
@@ -13,7 +13,7 @@ main {
   max-width: 70rem;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr;
   gap: 2rem;
   padding: var(--pad);
@@ -142,3 +142,20 @@ button {
     background: rgb(207, 221, 221);
   }
 }
+
+.youtubeContainer {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  margin-bottom: 50px;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}