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 -overlay">
<div class="backgroundVideo__backdrop">
<div class="backgroundVideo__wrapper">
<h1 class="backgroundVideo__title">
Imarc loves overlay background videos
</h1>
<p class="backgroundVideo__subtitle">
Lorem ipsum dolor sit amet consectetur adipisicing elit fuga.
</p>
</div>
</div>
<video class="backgroundVideo__video" autoplay="autoplay" loop="loop" poster="/media/video_placeholder.jpg" muted>
<source src="/media/imarc_culture_video_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/imarc_culture_video_1.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
///
/// 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.
///
@mixin backgroundVideo($background: rgba(255,255,255, 0.6)) {
align-items: center;
display: flex;
height: auto;
justify-content: center;
overflow: hidden;
position: relative;
&.-overlay::after {
content: "";
background: linear-gradient(to bottom, $blue-300, $blue-800);
position: absolute;
display: block;
mix-blend-mode: multiply;
z-index: 1;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
}
&__backdrop {
background-color: $background;
padding: $padding;
text-align: center;
z-index: 2;
}
&__video {
left: 0;
position: absolute;
top: 0;
width: 100%;
}
&::before {
content: "";
display: block;
padding-top: 56.25%;
}
}
.backgroundVideo {
@include backgroundVideo;
}