<div class="n7-video relative aspect-video">
<button type="button" class="n7-video__overlay n7-video__play transition-all absolute top-0 right-0 bottom-0 left-0 z-20 w-full group">
<span class="n7-btn n7-btn--icon w-16 h-16 absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white cursor-pointer rounded-full border-4">
<svg class="n7-icon inline-block align-middle fill-current w-8 h-8 transition-all" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--play" />
</svg>
<span class="sr-only">Riproduci il video: YouTube video title,</span>
</span>
<div class="absolute z-10 top-0 right-0 bottom-0 left-0 bg-black bg-opacity-5 group-hover:bg-opacity-40 transition-all"></div>
<picture class="block w-full h-full aspect-video">
<img class="object-cover object-center w-full h-full" src="/images/feathers.jpg" alt="" />
</picture>
</button>
<iframe class="n7-video__iframe n7-video__iframe w-full aspect-video invisible" src="https://www.youtube.com/embed/mkggXE5e2yk?si=dqKsArDWXeMSAXnZ" title="YouTube video title," frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="n7-video relative {{ aspectRatio }}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
<button type="button" class="n7-video__overlay n7-video__play transition-all absolute top-0 right-0 bottom-0 left-0 z-20 w-full group">
<span class="n7-btn n7-btn--icon w-16 h-16 absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white cursor-pointer rounded-full border-4">
{% render '@icon--small', { id: 'mini--play', classes: 'transition-all', size: 'w-8 h-8' }, true %}
<span class="sr-only">Riproduci il video: {{ videoTitle }}</span>
</span>
<div class="absolute z-10 top-0 right-0 bottom-0 left-0 bg-black bg-opacity-5 group-hover:bg-opacity-40 transition-all"></div>
{% if overlayImage %}
<picture class="block w-full h-full {{ aspectRatio }}">
<img class="object-cover object-center w-full h-full" src="{{ overlayImage }}" alt="{{ overlayImageAlt }}" />
</picture>
{% endif %}
</button>
<iframe class="n7-video__iframe n7-video__iframe w-full {{ aspectRatio }} invisible" src="{{ videoSrc }}" title="{{ videoTitle }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
{
"title": "video",
"videoSrc": "https://www.youtube.com/embed/mkggXE5e2yk?si=dqKsArDWXeMSAXnZ",
"overlayImage": "/images/feathers.jpg",
"overlayImageAlt": "",
"videoTitle": "YouTube video title,",
"aspectRatio": "aspect-video"
}
/* VIDEO SCRIPT
* Manage cover and video play
*/
document.addEventListener('DOMContentLoaded', function () {
'use strict';
// Selezionare tutti gli elementi videoContainer sulla pagina
var videoContainers = document.querySelectorAll('.n7-video');
// Iterare su ogni videoContainer trovato
videoContainers.forEach(function (videoContainer) {
var playButton = videoContainer.querySelector('.n7-video__play');
var videoOverlay = videoContainer.querySelector('.n7-video__overlay');
var videoIframe = videoContainer.querySelector('.n7-video__iframe');
function viewVideo() {
videoOverlay.style.display = 'none';
videoIframe.classList.remove('invisible');
videoIframe.setAttribute('tabindex', '0');
videoIframe.focus();
videoIframe.src += "&autoplay=1";
}
if (playButton) {
playButton.addEventListener('click', function (e) {
viewVideo();
});
}
});
});
Video component. Configurations:
Blocks: