From 68eb7833e73047bf67ad33291260a9e72ff020ed Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 15 May 2023 23:07:04 +0300
Subject: [PATCH] Video article style fixes

---
 src/components/Article/FullArticle.tsx         |  2 +-
 src/components/Article/VideoPlayer.module.scss | 12 ++++++++++++
 src/components/Article/VideoPlayer.tsx         |  5 +++--
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Article/VideoPlayer.module.scss

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 5fd27caf..bf4beaa6 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -150,7 +150,7 @@ export const FullArticle = (props: ArticleProps) => {
                   )}
                 </For>
               </div>
-              <Show when={props.article.cover}>
+              <Show when={props.article.cover && props.article.layout !== 'video'}>
                 <div
                   class={styles.shoutCover}
                   style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
diff --git a/src/components/Article/VideoPlayer.module.scss b/src/components/Article/VideoPlayer.module.scss
new file mode 100644
index 00000000..af6f8ef9
--- /dev/null
+++ b/src/components/Article/VideoPlayer.module.scss
@@ -0,0 +1,12 @@
+.videoContainer {
+  aspect-ratio: 16/9;
+
+  @include media-breakpoint-up(md) {
+    margin: 0 0 1em -16.6666%;
+  }
+
+  iframe {
+    height: 100%;
+    width: 100%;
+  }
+}
diff --git a/src/components/Article/VideoPlayer.tsx b/src/components/Article/VideoPlayer.tsx
index ec89f50f..4985a38a 100644
--- a/src/components/Article/VideoPlayer.tsx
+++ b/src/components/Article/VideoPlayer.tsx
@@ -1,7 +1,8 @@
 import { Show } from 'solid-js'
+import styles from './VideoPlayer.module.scss'
 
 export default (props: { url: string }) => (
-  <>
+  <div class={styles.videoContainer}>
     <Show when={props.url.includes('youtube.com')}>
       <iframe
         id="ytplayer"
@@ -20,5 +21,5 @@ export default (props: { url: string }) => (
         allowfullscreen
       />
     </Show>
-  </>
+  </div>
 )