<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
<div class="video-player">
{{render '@visual' image }}
<span class="video-player__trigger">
{{#if video.id }}
<span class="video-ID">{{ video.id }}</span>
{{/if}}
{{#if video.url }}
<span class="video-url">{{ video.url }}</span>
{{/if}}
{{> @icon-play }}
</span>
</div>
/* No context defined. */
.video-player:not([data-video]):not(.video-thumb):not(.controlbtn) {
// :not(.controlbtn) legacy reasons 🙄
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: var(--color--neutrals-1);
cursor: pointer;
}
.video-player__trigger:not(.snippet-b) {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 60px;
cursor: pointer;
@media (min-width: 750px) {
width: 100px;
}
.snippet-c & {
transform: translate(0, 0);
position: absolute;
top: auto;
right: var(--gap--4);
bottom: var(--gap--4);
left: auto;
width: 48px;
@media (min-width: 750px) {
width: 64px;
}
}
}
.videoPlayer__overlay {
.theme-2020 & {
background-color: rgba(#000, .8);
}
}
.video-ID,
.video-url,
.video-embed {
display: none;
}
No notes defined.