<div class="external-video">
<template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/L5IzPXxDWzc" title="YouTube-Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></template>
<a href="https://www.youtube.com/watch?v=L5IzPXxDWzc" class="external-video__preview" title="Play video">
<img class="external-video__preview-image" src="https://i.ytimg.com/vi/L5IzPXxDWzc/hqdefault.jpg" width="560" height="315" alt="" role="presentation" lazy="lazy" data-external-video-preview-image-autogenerated>
<span class="external-video__preview-icon">
<svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#play"></use>
</svg> </span>
</a>
<div class="external-video__warning">
<p class="external-video__warning-text">To activate the video from YouTube, please click on the link. By activating the link, data will be transmitted to YouTube. Further information can be found in <a class="link" data-link-type="internal" href="#" target="_blank"><span class="link__text u-underline">our privacy policy</span></a>.</p>
</div>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'external-video',
}, attrs ?? {}) }}>
<template class="external-video__code">
{{- content | raw -}}
</template>
<a {{ html_attributes({
href: link,
class: 'external-video__preview',
title: 'Play video' | t('site'),
}) }}>
{% if image|default %}
<img {{ html_attributes({
class: 'external-video__preview-image',
src: image.src,
srcset: image.src2x|default ? "#{image.src2x} 2x" : (image.srcset ?? false),
sizes: image.sizes ?? false,
width: image.width ?? false,
height: image.height ?? false,
alt: '',
role: 'presentation',
lazy: 'lazy',
'data-external-video-preview-image-autogenerated': autogenerated ?? true,
}) }}>
{% endif %}
<span class="external-video__preview-icon">
{% include '@icon' with { icon: 'play' } only %}
</span>
</a>
{% if privacyPolicyLink|default %}
<div class="external-video__warning">
<p class="external-video__warning-text">
{{- 'To activate the video from {provider}, please click on the link. By activating the link, data will be transmitted to {provider}. Further information can be found in <a href="{link}" target="_blank">our privacy policy</a>.' | t('site', {
link: privacyPolicyLink,
provider: provider ?? 'External Site' | t('site'),
}) | componentize(inline_only=true) -}}
</p>
</div>
{% endif %}
</div>
{
"content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/L5IzPXxDWzc\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"provider": "YouTube",
"link": "https://www.youtube.com/watch?v=L5IzPXxDWzc",
"privacyPolicyLink": "#",
"image": {
"src": "https://i.ytimg.com/vi/L5IzPXxDWzc/hqdefault.jpg",
"width": 560,
"height": 315
}
}
.external-video {
aspect-ratio: var(--external-video-aspect-ratio, 16 / 9);
container-name: external-video;
container-type: inline-size;
isolation: isolate;
position: relative;
}
.external-video__preview {
background-color: var(--external-video-background-color, var(--color-gray-900));
block-size: 100%;
border-radius: var(--border-radius-medium);
display: block;
overflow: hidden;
position: relative;
z-index: 1;
}
.external-video__preview-image {
block-size: 100%;
inline-size: 100%;
inset: 0;
object-fit: cover;
position: absolute;
scale: 1.1;
transition-property: scale;
z-index: 1;
.external-video__preview:is(:hover, :focus-visible) & {
scale: 1.2;
}
&:is([data-external-video-preview-image-autogenerated]) {
filter: blur(0.5rem);
}
}
.external-video__preview-icon {
--_external-video-play-size: var(--external-video-play-size, 0.15);
align-items: center;
background-color: var(--color-orange-500);
block-size: calc(var(--_external-video-play-size) * 100cqw);
border-radius: 50%;
color: var(--color-white);
display: flex;
font-size: calc((var(--_external-video-play-size) / 2) * 100cqw);
inline-size: calc(var(--_external-video-play-size) * 100cqw);
inset-block-start: 50%;
inset-inline-start: 50%;
justify-content: center;
line-height: 0;
overflow: hidden;
position: absolute;
transition-property: background-color, color;
translate: -50% -60%;
z-index: 3;
.external-video__preview:is(:hover, :focus-visible) & {
background-color: var(--color-gray-950);
}
}
.external-video__iframe {
block-size: 100%;
inline-size: 100%;
inset: 0;
position: absolute;
z-index: 1;
}
.external-video__warning {
--link-color: currentColor;
--link-underline-color: currentColor;
--link-color--enter: currentColor;
--link-underline-color--enter: transparent;
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
border-end-end-radius: var(--border-radius-medium);
border-end-start-radius: var(--border-radius-medium);
color: var(--external-video-warning-color, var(--color-white));
display: flex;
font-size: 1.2rem;
inline-size: 100%;
inset-block-end: 0;
justify-content: var(--external-video-warning-justify-content, center);
line-height: var(--external-video-warning-line-height, var(--line-height-regular));
padding-block-end: var(--external-video-warning-padding-block, 2rem);
padding-block-start: calc(var(--external-video-warning-padding-block, 2rem) + 4rem);
padding-inline: var(--external-video-warning-padding-inline, 2rem);
pointer-events: none;
position: absolute;
text-align: var(--external-video-warning-text-align, center);
text-wrap: balance;
z-index: 3;
}
.external-video__warning-text {
max-inline-size: 60rem;
:is(:any-link) {
pointer-events: all;
position: relative;
&::before {
content: '';
inset: -1rem;
position: absolute;
}
}
}
import { on } from 'delegated-events';
on('click', '.external-video__preview', (event) => {
event.preventDefault();
// Get container
const { currentTarget: $preview } = event;
const $externalVideo = $preview.closest<HTMLElement>('.external-video');
const $code = $externalVideo?.querySelector<HTMLTemplateElement>('.external-video__code');
if (!$code) {
return;
}
// Unpack template with content
const $embed = $code.content.cloneNode(true) as DocumentFragment;
// Delete preview
Array.from($externalVideo?.children ?? []).forEach(($node) => $node.remove());
// Add class to iframe
const $iframe = $embed.querySelector<HTMLIFrameElement>('iframe');
$iframe?.classList.add('external-video__iframe');
// Replace YouTube domain with youtube-nocookie.com and enable autoplay
if ($iframe?.src) {
const iFrameUrl = new URL($iframe.src);
if (iFrameUrl.hostname.match(/youtube(-nocookie)?\.com$/)) {
iFrameUrl.hostname = 'www.youtube-nocookie.com';
iFrameUrl.searchParams.set('autoplay', '1');
iFrameUrl.searchParams.set('rel', '0');
}
$iframe.src = iFrameUrl.toString();
}
// Embed video
$externalVideo?.appendChild($embed);
// Send event
$externalVideo?.dispatchEvent(new Event('external-video:visible'));
});
No notes defined.