Video

<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"
}
  • Content:
    /* 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;
        }
    }
  • URL: /components/raw/video/video.css
  • Filesystem Path: components/04-organisms/video/video.css
  • Size: 1.2 KB
  • Content:
    /* 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();
                    }
                });
            }
        });
    });
    
  • URL: /components/raw/video/video.js
  • Filesystem Path: components/04-organisms/video/video.js
  • Size: 1.6 KB

Video component. Configurations:

  • src: yotube video,
  • overlayImage: image overlay path
  • videoTitle: YouTube video title
  • aspectRatio: video aspect ration default aspect-video
  • containerClasses: eventual added style
  • iframeClasses: eventual video iframe classes