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.
.backgroundvideo>(.mold>div>h1+p)+video>source[src]
<div class="backgroundVideo">
<div class="backgroundVideo__backdrop">
<div>
<h1>
Imarc loves background videos
</h1>
<p>
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">
<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;
&__backdrop {
background-color: $background;
padding: 2em;
text-align: center;
z-index: 2;
}
&__video {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
&::before {
content: "";
display: block;
padding-top: 30%;
}
}