Fix the youtube embed for smaller screens fastai#358

Just a quick fix for the issue fastai#358.
xpire · Jun 19, 2021 · da9790b · da9790b
1 parent ac945d2
commit da9790b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/_includes/youtube.html b/_includes/youtube.html
@@ -4,6 +4,6 @@
     {% assign url = include.content | remove: "</a>" | split: ">" | last %}
     {% assign base_url = url |  split: "/" | last %}
 {% endif %}
-<center>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/{{base_url}}" frameborder="0" allowfullscreen></iframe>
+<center class="youtube-iframe-wrapper">
+    <iframe width="730" height="315" src="https://www.youtube.com/embed/{{base_url}}" frameborder="0" allowfullscreen></iframe>
 </center>
diff --git a/_sass/minima/fastpages-styles.scss b/_sass/minima/fastpages-styles.scss
@@ -256,3 +256,21 @@ table {
 pre code {
   font-size: 15px !important;
 }
+
+// Handle youtube videos, so they dont break on mobile devices
+.youtube-iframe-wrapper {
+  position: relative;
+  padding-bottom: 56.10%;
+  height: 0;
+  overflow: hidden;
+}
+
+.youtube-iframe-wrapper iframe,
+.youtube-iframe-wrapper object,
+.youtube-iframe-wrapper embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}