Backend

Name

Tipo

Descrizione

Codice blocco

HTML template

<div class="block-video-carousel">
  <div class="block-video-carousel-inner">
    {% if content.title %}<h2>{{ content.title }}</h2>{% endif %}
    <div class="video-carousel-container" data-speed="500" data-autoplay="5000" data-loop="true" data-pause-on-hover="true" data-pause-on-interaction="true">
      <div class="video-carousel-wrapper">
        <div class="video-carousel">
          {% for slide in content.slides %}
          <a class="video-carousel-item{% if forloop.first %} active{% endif %}" href="{{ slide.video_url }}" style="background-image: url('{{ slide.poster_url }}');"{% if not forloop.first %} aria-hidden="true"{% endif %}>
            <svg aria-hidden="true" class="button-play" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="46" fill="none" stroke="#fff" stroke-width="4"/><polygon points="42,32 42,68 72,50" fill="#fff"/></svg>
          </a>
          {% endfor %}
        </div>
        <svg aria-label="Precedente" class="button-prev" role="button" tabindex="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="15,4 7,12 15,20" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <svg aria-label="Successivo" class="button-next" role="button" tabindex="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="9,4 17,12 9,20" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      {% if content.show_thumbnails != "false" %}
      <div class="video-carousel-wrapper video-carousel-wrapper-thumbnails">
        <div class="video-carousel">
          {% for slide in content.slides %}
          <div class="video-carousel-item{% if forloop.first %} active{% endif %}" style="background-image: url('{{ slide.poster_url }}');"{% if not forloop.first %} aria-hidden="true"{% endif %}></div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

Styleable elements (JSON)

Lista slot stileabili, es. [{"slot": "title", "default": "h2"}].

CSS base

.block-video-carousel {
  box-sizing: border-box;
}

.block-video-carousel * {
  box-sizing: border-box;
}

.block-video-carousel-inner {
  display: flex;
  max-width: 1220px;
  margin: 0 auto;
  padding: 40px;
  flex-direction: column;
  gap: 40px;
}

.block-video-carousel-inner h2 {
  font-size: 65px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2em;
  color: #AB1E24;
  text-align: center;
  margin: 0;
}

.video-carousel-container {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.video-carousel-wrapper {
  position: relative;
}

.video-carousel {
  position: relative;
}

.video-carousel-item {
  background: no-repeat 50%;
  background-size: cover;
  height: 100%;
  position: relative;
}

.video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails) .video-carousel {
  aspect-ratio: 16/9;
}

.video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails) .video-carousel-item {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .5s;
  opacity: 0;
  z-index: 0;
}

.video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails) .video-carousel-item:not(.active) {
  pointer-events: none;
}

.video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails) .video-carousel-item.active {
  opacity: 1;
  z-index: 1;
}

.video-carousel-item .button-play {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  fill: #fff;
  height: 100px;
  width: 100px;
  opacity: .6;
  transition: all .5s;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .3));
}

.video-carousel-item:hover .button-play {
  opacity: 1;
}

.video-carousel-wrapper .button-prev,
.video-carousel-wrapper .button-next {
  color: hsla(0, 0%, 93%, .9);
  cursor: pointer;
  display: inline-flex;
  font-size: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 50px;
  height: 50px;
  transition: all .5s;
  opacity: .6;
  outline: 0;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .3));
}

.video-carousel-wrapper .button-prev:hover,
.video-carousel-wrapper .button-next:hover {
  opacity: 1;
}

.video-carousel-wrapper .button-prev {
  left: 10px;
}

.video-carousel-wrapper .button-next {
  right: 10px;
}

.video-carousel-wrapper-thumbnails {
  overflow: hidden;
}

.video-carousel-wrapper-thumbnails .video-carousel {
  display: flex;
  gap: 10px;
  transition: transform .5s;
}

.video-carousel-wrapper-thumbnails .video-carousel-item {
  aspect-ratio: 21 / 9;
  cursor: pointer;
  flex-shrink: 0;
}

.video-carousel-wrapper-thumbnails .video-carousel-item:not(.active):after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.block12-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.block12-video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
}

.block12-video-lightbox__dialog {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16/9;
  background: #000;
}

.block12-video-lightbox__frame-wrap {
  position: absolute;
  inset: 0;
}

.block12-video-lightbox__frame-wrap iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

.block12-video-lightbox__close {
  position: absolute;
  top: -40px;
  right: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .block-video-carousel-inner h2 {
    font-size: 45px;
  }
}

@media (max-width: 767px) {
  .block-video-carousel-inner {
    padding: 40px 20px;
  }

.block-video-carousel-inner h2 {
    font-size: 32px;
  }
}

@supports not (aspect-ratio: 16 / 9) {
  .video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails) .video-carousel {
    padding-top: 56.25%; /* 9/16 */
  }

.block12-video-lightbox__dialog {
    width: 100%;
    padding-top: 56.25%;
    height: 0;
  }

.block12-video-lightbox__frame-wrap {
    position: absolute;
    inset: 0;
  }
}

@supports not (aspect-ratio: 21 / 9) {
  .video-carousel-wrapper-thumbnails .video-carousel-item {
    padding-top: 42.86%; /* 9/21 */
  }
}

JS base (legacy)

Deprecato. Preferire js_shared + js_instance_template.

JS condiviso

(function () {
  'use strict';

var DEFAULT_SPEED = 500;
  var DEFAULT_AUTOPLAY = 5000;
  var DEFAULT_SLIDES_PER_VIEW = 7;
  var DEFAULT_SPACE = 10;

function slidesPerViewForWidth(width) {
    if (width <= 767) {
      return 3;
    }
    if (width <= 1024) {
      return 4;
    }
    return DEFAULT_SLIDES_PER_VIEW;
  }

function parseContainerSettings(container) {
    return {
      speed: parseInt(container.getAttribute('data-speed'), 10) || DEFAULT_SPEED,
      autoplayMs: parseInt(container.getAttribute('data-autoplay'), 10) || DEFAULT_AUTOPLAY,
      loop: container.getAttribute('data-loop') !== 'false',
      pauseOnHover: container.getAttribute('data-pause-on-hover') !== 'false'
    };
  }

function decodeVideoUrl(raw) {
    if (!raw) {
      return '';
    }
    return raw.replace(/&amp;/g, '&');
  }

function openVideoLightbox(videoUrl) {
    var url = decodeVideoUrl(videoUrl);
    if (!url) {
      return;
    }

var overlay = document.createElement('div');
    overlay.className = 'block12-video-lightbox';
    overlay.innerHTML =
      '<div class="block12-video-lightbox__backdrop" data-close="1"></div>' +
      '<div class="block12-video-lightbox__dialog" role="dialog" aria-modal="true">' +
      '<button type="button" class="block12-video-lightbox__close" aria-label="Chiudi">&times;</button>' +
      '<div class="block12-video-lightbox__frame-wrap">' +
      '<iframe src="' + url + '" title="Video" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>' +
      '</div></div>';

function close() {
      overlay.remove();
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    }

function onKey(event) {
      if (event.key === 'Escape') {
        close();
      }
    }

overlay.addEventListener('click', function (event) {
      if (event.target.closest('[data-close="1"]') || event.target.closest('.block12-video-lightbox__close')) {
        close();
      }
    });

document.body.style.overflow = 'hidden';
    document.addEventListener('keydown', onKey);
    document.body.appendChild(overlay);
  }

function initVideoCarousel(container) {
    var settings = parseContainerSettings(container);
    var speed = settings.speed;
    var autoplayMs = settings.autoplayMs;
    var loop = settings.loop;
    var pauseOnHover = settings.pauseOnHover;

var mainWrapper = container.querySelector('.video-carousel-wrapper:not(.video-carousel-wrapper-thumbnails)');
    if (!mainWrapper) {
      return;
    }

var thumbOuter = container.querySelector('.video-carousel-wrapper-thumbnails');
    var mainTrack = mainWrapper.querySelector('.video-carousel');
    var thumbTrack = thumbOuter ? thumbOuter.querySelector('.video-carousel') : null;
    if (!mainTrack) {
      return;
    }

var mainSlides = Array.prototype.slice.call(mainTrack.querySelectorAll(':scope > .video-carousel-item'));
    var thumbSlides = thumbTrack
      ? Array.prototype.slice.call(thumbTrack.querySelectorAll(':scope > .video-carousel-item'))
      : [];
    var hasThumbs = thumbSlides.length > 0;
    var count = hasThumbs ? Math.min(mainSlides.length, thumbSlides.length) : mainSlides.length;
    if (!count) {
      return;
    }

var index = 0;
    var timer = null;
    var paused = false;

mainSlides.forEach(function (slide) {
      slide.style.transition = 'opacity ' + speed + 'ms ease';
    });

function setMainSlide(nextIndex, animate) {
      index = loop
        ? (nextIndex + count) % count
        : Math.max(0, Math.min(nextIndex, count - 1));

var transitionMs = animate === false ? 0 : speed;

mainSlides.forEach(function (slide, i) {
        var active = i === index;
        slide.classList.toggle('active', active);
        slide.style.transition = 'opacity ' + transitionMs + 'ms ease';
        slide.setAttribute('aria-hidden', active ? 'false' : 'true');
      });

if (hasThumbs) {
        thumbSlides.forEach(function (slide, i) {
          var active = i === index;
          slide.classList.toggle('active', active);
          slide.setAttribute('aria-hidden', active ? 'false' : 'true');
        });
        updateThumbTrack();
      }
    }

function updateThumbTrack() {
      if (!hasThumbs || !thumbOuter || !thumbTrack) {
        return;
      }

var perView = slidesPerViewForWidth(window.innerWidth);
      var containerWidth = thumbOuter.clientWidth;
      var slideWidth = (containerWidth - DEFAULT_SPACE * (perView - 1)) / perView;

thumbSlides.forEach(function (slide) {
        slide.style.width = slideWidth + 'px';
        slide.style.flexShrink = '0';
      });

var trackWidth = count * slideWidth + Math.max(0, count - 1) * DEFAULT_SPACE;
      thumbTrack.style.width = trackWidth + 'px';
      thumbTrack.style.transition = 'transform ' + speed + 'ms ease';

var centerOffset = containerWidth / 2 - slideWidth / 2;
      var slideOffset = index * (slideWidth + DEFAULT_SPACE);
      var maxTranslate = 0;
      var minTranslate = containerWidth - trackWidth;
      var translate = centerOffset - slideOffset;
      translate = Math.max(minTranslate, Math.min(maxTranslate, translate));

thumbTrack.style.transform = 'translate3d(' + translate + 'px, 0, 0)';
    }

function next() {
      setMainSlide(index + 1, true);
    }

function prev() {
      setMainSlide(index - 1, true);
    }

function stopAutoplay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

mainSlides.forEach(function (slide) {
      slide.addEventListener('click', function (event) {
        event.preventDefault();
        openVideoLightbox(slide.getAttribute('href'));
      });
    });

if (hasThumbs) {
      thumbSlides.forEach(function (slide, i) {
        slide.addEventListener('click', function () {
          setMainSlide(i, true);
          startAutoplay();
        });
      });
      window.addEventListener('resize', updateThumbTrack);
    }

if (pauseOnHover) {
      container.addEventListener('mouseenter', function () {
        paused = true;
      });
      container.addEventListener('mouseleave', function () {
        paused = false;
      });
    }

setMainSlide(0, false);
    startAutoplay();
  }

function boot() {
    document.querySelectorAll('.video-carousel-container').forEach(initVideoCarousel);
  }

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
})();

Library/behavior, incluso una sola volta per blocco.

JS per istanza

Template con {{ block_id }}, eseguito per ogni occorrenza.

Schema contenuti

Content schema json

Default content json

Modifica blocco