<div class="rtds-video ">
<button type="button" class="rtds-video__play rtds-group">
<span class="rtds-video__play-icon rtds-btn rtds-btn--icon rtds-w-16 rtds-h-16 rtds-text-white rtds-cursor-pointer rtds-rounded-full rtds-border-4">
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 rtds-transition-all" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--play" />
</svg>
<span class="rtds-sr-only">Riproduci il video: Video youtube: titolo video</span>
</span>
<div class="rtds-video__overlay"></div>
<picture class="rtds-video__overlay-image">
<img class="rtds-object-cover rtds-object-center rtds-w-full rtds-h-full" src="/images/feathers.jpg" alt="" />
</picture>
</button>
<iframe class="rtds-video__iframe rtds-invisible" src="https://www.youtube.com/embed/mkggXE5e2yk?si=dqKsArDWXeMSAXnZ" title="Video youtube: titolo video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="rtds-video{% if aspectRatio %} {{ aspectRatio }}{% endif %} {% if containerClasses %} {{ containerClasses }}{% endif %}">
<button type="button" class="rtds-video__play rtds-group">
<span class="rtds-video__play-icon rtds-btn rtds-btn--icon rtds-w-16 rtds-h-16 rtds-text-white rtds-cursor-pointer rtds-rounded-full rtds-border-4">
{% render '@icon--small', { id: 'mini--play', classes: 'rtds-transition-all', size: 'rtds-w-8 rtds-h-8' }, true %}
<span class="rtds-sr-only">Riproduci il video: {{ videoTitle }}</span>
</span>
<div class="rtds-video__overlay"></div>
{% if overlayImage %}
<picture class="rtds-video__overlay-image{% if aspectRatio %} {{ aspectRatio }}{% endif %}">
<img class="rtds-object-cover rtds-object-center rtds-w-full rtds-h-full" src="{{ overlayImage }}" alt="{{ overlayImageAlt }}" />
</picture>
{% endif %}
</button>
<iframe class="rtds-video__iframe{% if aspectRatio %} {{ aspectRatio }}{% endif %} rtds-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": "Video youtube: titolo video"
}
/* Video player custom Component */
@layer components {
.rtds-video {
@apply rtds-aspect-video rtds-relative;
}
.rtds-video__iframe {
@apply rtds-aspect-video !rtds-w-full;
}
.rtds-video__overlay {
@apply rtds-absolute rtds-z-10 rtds-top-0 rtds-right-0 rtds-bottom-0 rtds-left-0 rtds-bg-black rtds-bg-opacity-20 group-hover:rtds-bg-opacity-40 rtds-transition-all;
}
.rtds-video__overlay-image {
@apply rtds-object-cover rtds-object-center rtds-block rtds-w-full rtds-h-full;
}
.rtds-video__play {
@apply rtds-transition-all rtds-absolute rtds-top-0 rtds-right-0 rtds-bottom-0 rtds-left-0 rtds-z-20 rtds-w-full;
}
.rtds-video__iframe,
.rtds-video__play {
@apply focus-visible:rtds-ring focus-visible:rtds-ring-offset-2 focus-visible:rtds-ring-offset-white focus-visible:rtds-ring-focusring focus-visible:rtds-shadow-[0_0_0_7px_rgba(255,255,255,1)] focus-visible:rtds-outline-none;
}
.rtds-video__play-icon {
@apply rtds-absolute rtds-z-20 rtds-top-1/2 rtds-left-1/2 -rtds-translate-x-1/2 -rtds-translate-y-1/2 rtds-background-primary;
}
}
/* VIDEO SCRIPT
* Manage cover and video play
*/
document.addEventListener('DOMContentLoaded', function () {
'use strict';
// Selezionare tutti gli elementi videoContainer sulla pagina
var videoContainers = document.querySelectorAll('.rtds-video');
console.log('Video containers trovati:', videoContainers.length);
// Iterare su ogni videoContainer trovato
videoContainers.forEach(function (videoContainer) {
var playButton = videoContainer.querySelector('.rtds-video__play');
var videoIframe = videoContainer.querySelector('.rtds-video__iframe');
function viewVideo() {
// Nascondi il pulsante play che contiene anche l'overlay
playButton.style.display = 'none';
videoIframe.classList.remove('rtds-invisible');
videoIframe.setAttribute('tabindex', '0');
videoIframe.focus();
// Aggiungi autoplay al src dell'iframe solo se non è già presente
if (!videoIframe.src.includes('autoplay=1')) {
videoIframe.src += (videoIframe.src.includes('?') ? '&' : '?') + 'autoplay=1';
}
}
if (playButton) {
playButton.addEventListener('click', viewVideo);
// listener per keydown per l'accessibilità
playButton.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
viewVideo();
}
});
}
});
});
Video component. Configurations: