Background Video

In order to achieve an edge-to-edge/cover effect for our video, we position: absolute; it within a parent container. We give it a faux-height via a padding value on this parent’s ::before pseudo element. If you aim to have a 16:9 aspect ratio, this padding value would be 56.25% (9 / 16). Do not forget to add a video placeholder image that matches your desired aspect ratio. Use both .webm and .mp4 video file formats for the widest browser support.

The -overlay modifier class can be added to the outermost parent container div with the class .backgroundVideo. This will create an ::after psuedo-element that will add a color overlay to the video. A linear-gradient is added with this modifier, but the ::after can be updated to any single color if preferred.

Emmet Shorthand

.backgroundvideo>(.mold>div.backgroundVideo__wrapper>h1.backgroundVideo__title+p.backgroundVideo__subtitle)+video>source[src]
<div class=" backgroundVideo -overlay">
    <video class="backgroundVideo__video" autoplay="autoplay" loop="loop" poster="/resources/media/video_placeholder.jpg" muted>
        <source src="/resources/media/imarc_culture_video_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="/resources/media/imarc_culture_video_1.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
    </video>
    <div class="backgroundVideo__container container">
        <h1 class="backgroundVideo__title">
            Imarc loves background videos
        </h1>
        <p class="backgroundVideo__subtitle">
            Lorem ipsum dolor sit amet consectetur adipisicing elit fuga.
        </p>
    </div>
</div>
  • Content:
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    ///
    /// BACKGROUND VIDEO plays a video (without sound) in the background of an element.
    /// Increasing the parent’s ::before padding results in a larger height.
    ///
    /// $background
    ///     Backdrop background color.
    ///
    
    .backgroundVideo {
        $b: &;
    
        --backgroundVideo-background-color: var(--background-color, rgba(0 0 0 / .5));
        --backgroundVideo-color: var(--color, #{config.$white});
    
        align-items: center;
        display: grid;
        justify-items: center;
    
        &__container {
            background: var(--backgroundVideo-background-color);
            color: var(--backgroundVideo-color);
            grid-area: 1 / 1;
            padding: config.$padding;
        }
    
        &__video {
            grid-area: 1 / 1;
            margin: 0 auto;
            width: 100%;
        }
    
    
        &.-overlay {
            &::before {
                background: linear-gradient(to bottom, config.$blue-300, config.$blue-800);
                content: '';
                grid-area: 1 / 1;
                height: 100%;
                mix-blend-mode: multiply;
                width: 100%;
            }
            #{$b}__container {
                isolation: isolate;
            }
        }
    }
    
  • URL: /components/raw/background-video/_index.scss
  • Filesystem Path: resources/styles/organisms/background-video/_index.scss
  • Size: 1.2 KB