<div class="supt-video">
<div class="supt-video__wrap">
<video playsinline preload="metadata" controls>
<source src="/sites/gv/files/flmngr/hero-text-media.mp4" type="video/mp4">
</video>
<span class="supt-button -icon ">
<button class="supt-button__link">
<span class="supt-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewbox="0 0 10 10" fill="none">
<path d="M1.875 1.78957C1.875 1.00725 2.73283 0.527897 3.3991 0.937909L8.61606 4.14835C9.25059 4.53883 9.25059 5.46118 8.61605 5.85166L3.39909 9.0621C2.73282 9.47211 1.875 8.99276 1.875 8.21044L1.875 1.78957Z" fill="#ED002F" />
</svg>
</span>
</button>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</div>
No notes defined.
<div class="supt-video">
<div class="supt-video__wrap">
<video playsinline preload="metadata" {% if autoplay %} autoplay muted loop {% else %} controls {% endif %}>
{% for item in src %}
<source src="{{ item.src }}" type="{{ item.type }}">
{% endfor %}
</video>
{% include "atoms/buttons/button/button.twig" with {
"icon": "play",
"modifiers": [
"icon"
]
} only %}
</div>
{% if caption %}
<figcaption>{{ caption }}</figcaption>
{% endif %}
</div>
{
"src": [
{
"src": "/sites/gv/files/flmngr/hero-text-media.mp4",
"type": "video/mp4"
}
]
}
export class Video {
private $video: HTMLVideoElement | null = null;
private $button: HTMLElement | null = null;
private hasBeenPlayed: boolean = false;
constructor($element: HTMLElement) {
this.$video = $element.querySelector('video');
this.$button = $element.querySelector('.supt-button');
// hide controls by default
if (this.$video) {
this.$video.removeAttribute('controls');
}
//sets up event listeners
this.bindEvents();
}
private bindEvents(): void {
if (!this.$video || !this.$button) return;
// play video
this.$button.addEventListener('click', e => {
e.preventDefault();
// show controls on first play
if (!this.hasBeenPlayed && this.$video) {
this.$video.setAttribute('controls', '');
this.hasBeenPlayed = true;
}
this.$video?.play();
});
// hide button permanently after first play
this.$video.addEventListener('play', () => {
this.$button && (this.$button.style.display = 'none');
});
}
}
.supt-video {
display: flex;
flex-direction: column;
gap: $spacing-2;
&__wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
video {
display: block;
height: auto;
width: 100%;
}
.supt-button {
position: absolute;
&__wrapper {
box-shadow:
8px 8px 16px 0px rgba(220, 221, 222, 0.3),
-8px -8px 16px 0px rgba(255, 255, 255, 0.3);
}
&__icon {
padding: unset;
}
}
figcaption {
@extend %t-body-xs;
color: $color-grey-5;
}
}