scss Mixin for video on all container == background video。 Миксинадлязаполнениявидео-бэкграундом。

Posted 2021-05-18

video(loop, autoplay)
  source(type='video/mp4', src='http://fvsch.com/code/video-background/video.mp4')
  source(type='video/webm', src='http://fvsch.com/code/video-background/video.webm')

@mixin stretching-pos($type-pos: absolute) {
    left: 0;top: 0;right: 0;bottom: 0;
    position: $type-pos;
}

@mixin stretching-hw($type-pos: absolute) {
    height: 100%; width: 100%;
    position: $type-pos;
}

#video-bg {
    @include stretching-pos;
    overflow: hidden;
    > video {
        @include stretching-hw;
        top: 0;
        left: 0;
        @media (min-aspect-ratio: 16/9) {height: 300%; top: -100%;}
        @media (max-aspect-ratio: 16/9) {width: 300%; left: -100%;}

        @supports (object-fit: cover) {
          top: 0; left: 0;
          width: 100%; height: 100%;
          object-fit: cover;
        }
    }
}