feat: add self-hosted video

Felix Boerner

08.14.2024 186dfa8c13b69d9a5a728bee70341c7fa033cd67

 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;
  }
}