Fixed video size to be responsive

2 files changed, 13 insertions, 2 deletions

diff --git a/common/main.css b/common/main.css
index 2b47196..9edc349 100644
--- a/common/main.css
+++ b/common/main.css
@@ -629,6 +629,16 @@ a#game-template:hover {
     filter: contrast(180%);
 }
 
+.video-container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.video {
+  width: 100%;
+  height: 100%;
+}
+
 @media only screen and (max-width: 600px) {
 
     /* general layout changes for mobile */
@@ -677,5 +687,4 @@ a#game-template:hover {
     }
 
 
-
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ffcc657..7a800d8 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,9 @@
             <div class="content">
                 <h1>raylib is a simple and easy-to-use library to enjoy videogames programming.</h1>
                 <br>
-                <iframe width="840" height="472" src="https://www.youtube.com/embed/GdlGE-eDlzg?si=CCFNbsNxQkpWWoN1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                <div class="video-container">
+                <iframe class="video" src="https://www.youtube.com/embed/GdlGE-eDlzg?si=CCFNbsNxQkpWWoN1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
                 <br>
                 <br>
                 <h1>get the raylib Windows Installer to install raylib in seconds:</h1>