<div class="js-embedded-video-player embedded-video-player embedded-video-player--cover">
<video aria-labelledby=Video title class="embedded-video-player__embedded" poster=/mocks/img/video-cover.jpg name="media">
<source src=https://int.swegon.com/globalassets/digizuite/2680-en-animation-swegon-inside-ready-final-1738076803.mp4?mediaformatid=10079 type="video/mp4">
</video>
<button id=Video title class="embedded-video-player__cover">
<span class="embedded-video-player__label">
Play video (2 minojter)
</span>
</button>
</div>
<div class="js-embedded-video-player embedded-video-player {{getmodifiers modifiers " embedded-video-player"}}">
<video aria-labelledby={{name}} class="embedded-video-player__embedded" poster={{coverImageUrl}} name="media">
<source src={{url}} type="video/mp4">
</video>
<button id={{name}} class="embedded-video-player__cover">
<span class="embedded-video-player__label">
{{{label}}}
</span>
</button>
</div>
{
"coverImageUrl": "/mocks/img/video-cover.jpg",
"url": "https://int.swegon.com/globalassets/digizuite/2680-en-animation-swegon-inside-ready-final-1738076803.mp4?mediaformatid=10079",
"altText": "Video cover image",
"name": "Video title",
"label": "Play video (2 minojter)",
"modifiers": [
"cover"
]
}
const EmbeddedVideoPlayer = (el) => {
const playButton = el.querySelector('.embedded-video-player__cover');
const video = el.querySelector('.embedded-video-player__embedded');
const label = el.querySelector('.embedded-video-player__label');
playButton.addEventListener('click', playVideo);
el.addEventListener('keydown', function (event) {
if (el.activeElement !== playButton && el.activeElement !== video) return;
if ((event.key === ' ' || event.key === 'Enter')) {
event.preventDefault(); // Prevent scrolling when pressing Space
playVideo();
video.focus();
}
});
function playVideo() {
console.log({ video });
playButton.classList.add('h-hidden');
label.classList.add('h-hidden');
video.setAttribute('controls', 'controls');
video.play();
}
};
export default EmbeddedVideoPlayer;
$embedded-video-player-ratio: percentage(9 / 16);
.embedded-video-player {
position: relative;
display: inline-block;
width: 100%;
&--cover &__cover {
visibility: visible;
}
&__embedded {
width: 100%;
}
}
.embedded-video-player__cover {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding-bottom: $embedded-video-player-ratio;
background-size: cover;
background-position: center;
visibility: hidden;
cursor: pointer;
&:before {
content: " ";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: size(15);
background: linear-gradient(to top, rgba($color-black, 0.8), transparent);
@include breakpoint($s) {
height: size(17.5);
}
}
}
.embedded-video-player__label {
color: $color-white;
font-size: size(2);
line-height: size(3);
font-weight: $font-weight-bold;
position: absolute;
left: size(2.25);
bottom: size(3);
padding-left: size(7.5);
@include breakpoint($s) {
left: size(4);
bottom: size(5.25);
}
&:before,
&:after {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: -50%;
}
&:before {
width: size(6);
height: size(6);
background: $color-white;
border-radius: 100%;
}
&:after {
margin-left: size(2.5);
margin-bottom: size(1.25);
border: solid size(1.75) $color-gray-5;
transform: scaleY(0.7);
border-color: transparent transparent transparent $color-gray-5;
}
}
import EmbeddedVideoPlayer from './EmbeddedVideoPlayer';
const els = document.querySelectorAll('.js-embedded-video-player');
for (let el of els) {
new EmbeddedVideoPlayer(el);
}
No notes defined.