Fix width of video on mobile

aehrc · Mar 17, 2024 · 968be82 · 968be82
1 parent 6b638f4
commit 968be82
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/site/docs/index.md b/site/docs/index.md
@@ -9,7 +9,12 @@ use [FHIR&reg;](https://hl7.org/fhir) and clinical terminology within health
 data analytics. It is built on [Apache Spark](https://spark.apache.org), and
 includes both language libraries and a server implementation.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/ZSv2qMGPquU?si=daZ2jgNFpNc3luQx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe class="yt-embed" 
+    src="https://www.youtube.com/embed/ZSv2qMGPquU?si=daZ2jgNFpNc3luQx" 
+    title="YouTube video player" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen />
 
 ## What can it do?
 

diff --git a/site/src/css/custom.css b/site/src/css/custom.css
@@ -98,3 +98,17 @@ code {
 table {
     font-size: 90%;
 }
+
+.yt-embed {
+    /* Default styling for screens wider than 560px */
+    width: 560px;
+    height: 315px;
+}
+
+@media screen and (max-width: 560px) {
+    .yt-embed {
+        /* Adjustments for screens 560px wide or less */
+        width: 92vw;
+        height: calc(92vw * 0.5625);
+    }
+}