<div class="hero-video js-hero-video hero-video--overlay">
<h1 class="h-visibility-hidden">This is the hero video heading</h1>
<div class="hero-video__media">
<figure>
<video aria-labelledby="hero-video-title" class="hero-video__video" poster="/mocks/img/video-cover.jpg" name="media" autoplay muted playsinline>
<source src="/mocks/video/sample-5s.mp4" type="video/mp4">
</video>
</figure>
<div class="hero-video__options">
<button class="hero-video__toggle-play" title="Play and pause video">
<svg class="icon hero-video_play-button" focusable="false">
<use xlink:href="#icon-play"></use>
</svg>
<svg class="icon hero-video_pause-button" focusable="false">
<use xlink:href="#icon-pause"></use>
</svg>
</button>
</div>
</div>
<div class="hero-video__content">
<h2 id="hero-video-title" class="hero-video__title">Calculate Your Climate Impact with Swegon Footprint</h2>
<p class="hero-video__preamble">Compare indoor climate systems by CO₂ impact and cost. Make informed, sustainable decisions with our free calculator.</p>
<a class="button button--primary " href="#">
<span class="button__label">Calculate now</span>
</a>
</div>
</div>
<div class="hero-video js-hero-video{{#if overlay}} hero-video--overlay{{/if}}">
{{#if heading}}<h1 class="h-visibility-hidden">{{heading}}</h1>{{/if}}
<div class="hero-video__media">
<figure>
<video aria-labelledby="{{name}}" class="hero-video__video" poster="{{coverImageUrl}}" name="media" autoplay muted playsinline>
<source src="{{url}}" type="video/mp4">
</video>
</figure>
<div class="hero-video__options">
<button class="hero-video__toggle-play" title="Play and pause video">
{{> @icon id="play" additionalClasses="hero-video_play-button"}}
{{> @icon id="pause" additionalClasses="hero-video_pause-button"}}
</button>
</div>
</div>
<div class="hero-video__content">
<h2 id="{{name}}" class="hero-video__title">{{title}}</h2>
{{#if preamble}}
<p class="hero-video__preamble">{{preamble}}</p>
{{/if}}
{{#if ctaLabel}}
{{> @button label=ctaLabel href=ctaHref modifiers="primary"}}
{{/if}}
</div>
</div>
{
"coverImageUrl": "/mocks/img/video-cover.jpg",
"url": "/mocks/video/sample-5s.mp4",
"name": "hero-video-title",
"heading": "This is the hero video heading",
"title": "Calculate Your Climate Impact with Swegon Footprint",
"preamble": "Compare indoor climate systems by CO₂ impact and cost. Make informed, sustainable decisions with our free calculator.",
"ctaLabel": "Calculate now",
"ctaHref": "#",
"overlay": true
}
const HeroVideo = (el) => {
const playBtn = el.querySelector('.hero-video__toggle-play');
const video = el.querySelector('.hero-video__video');
if (!playBtn || !video) return;
playBtn.addEventListener('click', togglePlayPause);
video.addEventListener('ended', () => {
setPlayingState(false);
});
function togglePlayPause() {
if (video.paused) {
video.play();
setPlayingState(true);
} else {
video.pause();
setPlayingState(false);
}
}
function setPlayingState(playing) {
playBtn.classList.toggle('is-playing', playing);
}
video.play().then(() => setPlayingState(true)).catch(() => setPlayingState(false));
};
export default HeroVideo;
.hero-video {
display: flex;
flex-direction: column;
position: relative;
}
// Media
.hero-video__media {
width: 100%;
overflow: hidden;
position: relative;
figure {
position: relative;
width: 100%;
margin: 0;
padding-bottom: 100%;
@include breakpoint($m) {
height: 570px;
padding-bottom: 0;
}
}
video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
display: block;
}
&::after {
content: " ";
display: block;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: 100%;
height: 85px;
background: linear-gradient(
0,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 100%
);
z-index: 1;
}
@include breakpoint($m) {
.hero-video--overlay &::before {
content: " ";
position: absolute;
width: 800px;
height: 100%;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 100%
);
z-index: 2;
}
}
}
// Content
.hero-video__content {
background-color: $color-white;
padding: size(2.5) size(1.5) 0;
@include breakpoint($m) {
background-color: transparent;
position: absolute;
top: size(7.5);
left: size(4);
padding: 0;
z-index: 1;
max-width: 540px;
width: 70%;
h2,
p {
color: $color-white;
}
}
}
.hero-video__title {
margin-bottom: size(2);
}
.hero-video__preamble {
margin-bottom: size(4);
}
// Play and pause
.hero-video__options {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
svg {
fill: $color-white;
width: 36px;
height: 36px;
}
}
.hero-video_play-button,
.hero-video_pause-button {
display: none;
cursor: pointer;
}
.hero-video__toggle-play.is-playing .hero-video_pause-button {
display: inline-block;
}
.hero-video__toggle-play:not(.is-playing) .hero-video_play-button {
display: inline-block;
}
import HeroVideo from './HeroVideo';
const els = document.querySelectorAll('.js-hero-video');
for (let el of els) {
new HeroVideo(el);
}
No notes defined.