union_auto_test/core/templates/includes/video.html

{% load static %}

<section class="videoSect videoSliderW sect">
    <div class="container">

      <div class="d-flex justify-content-between align-items-end sectHead">
        <div class="d-block">
          <div class="d-flex gap-1 mb-4">
            <h2><a class="h2 reviewsTitle pb-2 border-b-gray-4 text--white" href="{% url 'core:video' %}">Наши видеообзоры</a></h2>
            <div class="d-none d-lg-flex align-items-center gap-2 socials">
              <a href="{{ youtube }}" class="socialLink" target="_blank">
                <img src="{% static 'img/admin/socials/icon-1.svg' %}?v=1" alt="icon">
              </a>
              <a href="{{ vk }}" class="socialLink" target="_blank">
                <img src="{% static 'img/admin/socials/icon-2.svg' %}?v=1" alt="icon">
              </a>
              <a href="{{ instagram }}" class="socialLink" target="_blank">
                <img src="{% static 'img/admin/socials/icon-3.svg' %}?v=1" alt="icon">
              </a>
            </div><!-- /socials -->
          </div>

          <div class="text--white videoText text--lg text--lg-sm-16">
            <p>
              Мы регулярно снимаем обзоры необычных или популярных автомобилей, <a class="color-white d-inline"
                href="{{ youtube }}" target="_blank">подписывайтесь на наш канал,</a> чтобы не
              пропустить все самое интересное
            </p>
          </div>

        </div>

        <div class="sliderNav sliderNav--white gap-2 d-none d-lg-flex">
          <button class="navArrow navArrowPrev">
            <svg>
              <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#arrow-prev"></use>
            </svg>
          </button>
          <button class="navArrow navArrowNext">
            <svg>
              <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#arrow-next"></use>
            </svg>
          </button>
        </div><!-- /sliderNav -->
      </div>

      <div class="swiper videoSlider">
        <div class="swiper-wrapper">
          {% for video in videos %}
          <div class="swiper-slide videoSlide">
            <div class="videoSlideImg">
              <div class="js-video" data-src="{{ video.player_link }}" style="background-image: url({{ video.cover }}); background-size: cover; background-position: center; position: relative; width: 100%; padding-top: 56.25%;">
                <button class="videoSlideBtn" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;display:flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.35);border-radius:50%;cursor:pointer"
                onclick="playVideo(this)">
                  <img src="{% static 'img/icons/play-blue.svg' %}?v=1" alt="play" style="width:36px;height:36px">
                </button>
              </div>
            </div>
            <div class="videoSlideTitle color-gray1 fw-medium text--lg text--lg-sm-14 mt-4">
              <a href="{{ video.link }}" target="_blank">{{ video.title }}</a>
            </div>
          </div>

            {% comment %} <div class="swiper-slide videoSlide" href="https://vk.com/video_ext.php?oid=-226856451&id=456239029&hash=e8f0b1ac2b76a02b&autoplay=0" data-fancybox="">
                <div class="videoSlideImg" style="background-image: url({{ video.cover }});">
                <button class="videoSlideBtn">
                    <img src="{% static 'img/icons/play-blue.svg' %}?v=1" alt="play">
                </button>
                </div>
                <div class="videoSlideTitle color-gray1 fw-medium text--lg text--lg-sm-14 mt-4">
                {{ video.title }}
                </div>
            </div><!-- /videoSlide --> {% endcomment %}
          {% endfor %}

        </div>
      </div>

      <div class="d-flex d-lg-none align-items-center gap-2 socials mt-5">
        <a href="{{ youtube }}" class="socialLink" target="_blank">
          <img src="{% static 'img/admin/socials/icon-1.svg' %}?v=1" alt="icon">
        </a>
        <a href="{{ vk }}" class="socialLink" target="_blank">
          <img src="{% static 'img/admin/socials/icon-2.svg' %}?v=1" alt="icon">
        </a>
        <a href="{{ instagram }}" class="socialLink" target="_blank">
          <img src="{% static 'img/admin/socials/icon-3.svg' %}?v=1" alt="icon">
        </a>
      </div><!-- /socials -->

    </div>
</section>
<script>
  function playVideo(btn) {
    const box = btn.closest('.js-video');
    if (!box) return;

    const rawSrc = box.dataset.src || '';
    const sep = rawSrc.includes('?') ? '&' : '?';
    let src = `${rawSrc}${sep}autoplay=1`;

    if (/youtube\.com|youtu\.be/.test(rawSrc)) {
      src += '&mute=1&rel=0&modestbranding=1&playsinline=1';
    } else if (/vk\.com/.test(rawSrc)) {
      src += '&muted=1';
    }

    box.innerHTML = `<iframe src="${src}" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen style="position:absolute; top:0; left:0; width:100%; height:100%"></iframe>`;
    box.classList.add('is-playing');
  }
</script>