Merge pull request #553 from xpire/fix/youtube-mobile

Fix the youtube embed for smaller screens #358
fastai · Jul 17, 2021 · bc773ea · bc773ea
2 parents f2f16aa + da9790b
commit bc773ea
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%;
+}