From 2ba3e7fb75dc14b04cf42d2154fb951d984466b8 Mon Sep 17 00:00:00 2001
From: loikein <wanleiqiong@gmail.com>
Date: Tue, 18 Apr 2023 23:50:58 +0100
Subject: [PATCH] fix bugs from https://github.com/loikein/hugo-tufte/issues/6

---
 assets/scss/vendor/tufte.scss   | 22 +++++++++++++---------
 layouts/shortcodes/youtube.html |  2 ++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss
index 2c40fba..b2e91fc 100644
--- a/assets/scss/vendor/tufte.scss
+++ b/assets/scss/vendor/tufte.scss
@@ -409,18 +409,22 @@ label.marginnote-ind {
     display: none;
 }
 
-iframe.video {
-  width: 55%;
-  margin-top: 1.4em;
-  margin-bottom: 1.4em;
+.video-container {
+    width: 100%;
+    margin-top: 1.4rem;
+    margin-bottom: 1.4rem;
 }
 
-iframe.video--16x9 {
-  aspect-ratio: 16/9;
+.video {
+    width: 55%;
 }
 
-iframe.video--4x3 {
-  aspect-ratio: 4/3;
+.video--16x9 {
+    aspect-ratio: 16/9;
+}
+
+.video--4x3 {
+    aspect-ratio: 4/3;
 }
 
 @media (max-width: 760px) {
@@ -469,7 +473,7 @@ iframe.video--4x3 {
     img {
         width: 100%;
     }
-    iframe.video {
+    .video {
         width: 90%;
     }
 }
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
index 2a362f6..7c8dffe 100644
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@@ -2,6 +2,8 @@
 {{ $4x3 := .Get "4x3" | default "false" }}
 {{ $title := .Get "title" | default "YouTube Video" }}
 
+<div class="video-container">
 <iframe
 class="video {{ with $4x3 }}{{ if eq . "true" }}video--4x3{{ else }}video--16x9{{ end }}{{ end }}"
 src="https://www.youtube-nocookie.com/embed/{{ $id }}?cc_load_policy=1&cc=1{{ with .Get "start" }}&start={{ . }}{{ end }}{{ with .Get "end" }}&end={{ . }}{{ end }}" allowfullscreen title="{{ $title }}" frameborder="0" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe>
+</div>