From da9790b59cc2382f54dbf17a75c4711a0998a0be Mon Sep 17 00:00:00 2001
From: xpirep <justin.or.mail@gmail.com>
Date: Sat, 19 Jun 2021 22:26:15 +1000
Subject: [PATCH] Fix the youtube embed for smaller screens #358

Just a quick fix for the issue #358.
---
 _includes/youtube.html             |  4 ++--
 _sass/minima/fastpages-styles.scss | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/_includes/youtube.html b/_includes/youtube.html
index bd8f86b0..ea1c7ae8 100644
--- 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
index 05e94c9a..621a7e1b 100755
--- 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%;
+}