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.
.backgroundvideo>(.mold>div.backgroundVideo__wrapper>h1.backgroundVideo__title+p.backgroundVideo__subtitle)+video>source[src]
<div class=" backgroundVideo">
<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>
@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;
}
}
}