feat: add self-hosted video

2 files changed, 56 insertions, 1 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 @@ a {
     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;
+  }
+}
diff --git a/layouts/partials/video.html b/layouts/partials/video.html
index 4a803c8..b0f5aac 100644
--- a/layouts/partials/video.html
+++ b/layouts/partials/video.html
@@ -1,4 +1,4 @@
-<div class="split-image split-video">
+<div class="image split-video">
 
   <!-- YouTube Video -->
   {{ if .Site.Params.visual.video.youtubeId }}