From 684bbfd8af1cb7f415084e7932146d3ca1d11f2d Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Sun, 7 Mar 2021 12:48:03 +0100
Subject: [PATCH] fix(article): video iframe margin

---
 assets/scss/partials/layout/article.scss | 21 ++++++++++++++++++++-
 layouts/shortcodes/bilibili.html         |  3 +--
 layouts/shortcodes/tencent.html          |  6 +++---
 layouts/shortcodes/youtube.html          | 10 +++++++---
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 6258069..93789e6 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -300,12 +300,31 @@
         color: var(--card-text-color-main);
     }
 
+    .video-wrapper {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+        overflow: hidden;
+
+        & > iframe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+        }
+    }
+
     /// Negative margins
     blockquote,
     figure,
     .gallery,
-    pre {
+    pre,
+    .video-wrapper,
+    .s_video_simple {
         margin-left: calc((var(--card-padding)) * -1);
         margin-right: calc((var(--card-padding)) * -1);
+        width: calc(100% + var(--card-padding) * 2);
     }
 }
diff --git a/layouts/shortcodes/bilibili.html b/layouts/shortcodes/bilibili.html
index 3c563dc..602406c 100644
--- a/layouts/shortcodes/bilibili.html
+++ b/layouts/shortcodes/bilibili.html
@@ -12,13 +12,12 @@
     <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
 {{ end }}
 
-<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+<div class="video-wrapper">
     <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
             scrolling="no"
             frameborder="no"
             framespacing="0"
             allowfullscreen="true"
-            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
     >
     </iframe>
 </div>
diff --git a/layouts/shortcodes/tencent.html b/layouts/shortcodes/tencent.html
index 09f9e8b..baf5f3c 100644
--- a/layouts/shortcodes/tencent.html
+++ b/layouts/shortcodes/tencent.html
@@ -1,10 +1,10 @@
 {{ $vid := .Get 0 }}
-<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+<div class="video-wrapper">
     <iframe src="http://v.qq.com/txp/iframe/player.html?vid={{ $vid }}&auto=0" 
             scrolling="no" 
             frameborder="no"
             framespacing="0" 
-            allowfullscreen="true" 
-            style="position: absolute; width: 100%; height: 100%;">
+            allowfullscreen="true"
+    >
     </iframe>
 </div>
\ No newline at end of file
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
index 5dd94e6..2f85931 100644
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@@ -2,8 +2,12 @@
 {{- if not $pc.Disable -}}
 {{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
 {{- $id := .Get "id" | default (.Get 0) -}}
-{{- $class := .Get "class" | default (.Get 1) }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
-  <iframe loading="lazy" src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="YouTube Video"></iframe>
+<div class="video-wrapper">
+    <iframe loading="lazy" 
+            src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" 
+            allowfullscreen 
+            title="YouTube Video"
+    >
+    </iframe>
 </div>
 {{ end -}}
\ No newline at end of file