From 186dfa8c13b69d9a5a728bee70341c7fa033cd67 Mon Sep 17 00:00:00 2001
From: Felix Boerner <ich@felix-boerner.de>
Date: Mon, 11 Nov 2024 13:26:11 +0000
Subject: [PATCH] feat: add self-hosted video
---
assets/scss/_content.scss | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 55 insertions(+), 0 deletions(-)
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index e6450b3..a8380f0 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -246,3 +246,58 @@
max-height: 30vh;
}
}
+
+//-------------------------------------------------------------------------------
+// Videos - shout out to my bud https://twitter.com/manuelmoreale for the Ninja skills
+//-------------------------------------------------------------------------------
+
+// YouTube
+
+.split-video {
+ overflow:hidden;
+ position:relative;
+ line-height:0;
+}
+
+.video-wrap{
+ position:absolute;
+ top:50%;
+ left:50%;
+ transform:translate(-50%,-50%);
+}
+
+.video-container {
+ position:relative;
+ overflow:hidden;
+ height: 56.25vw;
+ width: 100vw;
+ @media (max-aspect-ratio:16/9) {
+ height: 100vh;
+ width: 177.7777777778vh; // this is for the ration 16:9
+ }
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+// Self-Hosted
+
+video.video {
+ object-fit : cover;
+ object-position : 50% 50%;
+ width : 100%;
+ height : 100%;
+}
+
+@media (min-width: $bp-smallish) {
+ video.video {
+ height: 100vh;
+ }
+}
--
Gitblit v1.10.0