Examples
Default styling
Background Video - Copy component
.paragraph--background-video-copy--video-right
Video right
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.middle-centre
Fullscreen BG video middle centre
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.top-left
Fullscreen BG video top-left
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.top-centre
Fullscreen BG video top-centre
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.top-right
Fullscreen BG video top-right
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.middle-left
Fullscreen BG video middle-left
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.middle-right
Fullscreen BG video middle-right
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.bottom-left
Fullscreen BG video bottom-left
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.bottom-centre
Fullscreen BG video bottom-centre
Background Video - Copy component
.paragraph--background-video-copy--fullscreen.bottom-right
Fullscreen BG video bottom-right
Background Video - Copy component
Markup: components/bg-video-copy/bg-video-copy.twig
<section class="paragraph--background-video-copy {{modifier_class}} bg--dark-teal">
<div class="bgvc__video-wrapper objectfit">
<video muted="true" preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg">
<source src="videos/SR18-promo.mp4" type="video/mp4">
</video>
</div>
<div class="bgvc__text-wrapper">
<div class="bgvc__text cr-body">
<h1 style="text-align: center;">
Background Video - Copy component
</h1>
</div>
</div>
</section>
Source:
_sr18-styleguide.scss
, line 183