Видео в блоке ТЕ100 с анимацией активной карточки

С помощью этого решения вы сможете добавить видео в карточки стандартного блока TE100 и также настроить анимацию по наведению

И помните, что на мобильных устройствах видео увеличивает скорость загрузки сайта

Смотреть видео Скопировать код

Quality

Each member of our team

Support

We offer you a professional

Price

Our prices are fixed for some standard services

Вариант 1

На компьютерной версии видео проигрывается автоматически по наведению на карточку. На мобильных устройствах видео воспроизводится по тапу

Вариант 2

На компьютерной версии видео проигрывается автоматически по наведению на карточку. На мобильных устройствах видео воспроизводится также автоматически

Вариант 3

На компьютерной и мобильной версиях видео проигрывается автоматически

   <!--https://dsgnmax.ru/useful/video-te100--> <style>
:root{
    --dbmTE100WidthContainer: 100vw; /*Ширина контейнера равна ширине экрана*/
    --dbmTE100PaddingContainer: 40px; /*Отступы по бокам от контейнера*/
    
    --dbmTE100HeightCardDesktop: 500px; /*Высотка карточек на десктопе*/
    --dbmTE100WidthHoverCard: 180%; /*Ширина карточки при наведении*/
    --dbmTE100TransitionCard: all 0.4s cubic-bezier(0.85, 0.05, 0.17, 0.93); /*Плавность анимации*/
    --dbmTE100GapCard: 20px; /*Отступ между карточками*/
    --dbmTE100PreviewCard: none; /*Отображение превью для карточек, если оно не нужно, то укажите значение none, если нужно – block*/
    
    --dbmTE100SliderMobile: nowrap; /*Если на мобильных устройствах вам не нужен слайдер, то просто поменяйте это значение nowrap на wrap*/
    /*Также, еси вам не нужен слайдер на мобильных устройства, то значение ниже нужно указать не в пикселях, а 100%, тогда карточки будут растягиваться на всю ширину экрана и выстраиваться друг под другом*/
    --dbmTE100WidthCardMobile: 320px; /*Ширина карточки на мобильных устройствах*/
    --dbmTE100PaddingContainerMobile: 20px; /*Отступы по бокам от контейнера на мобильных устройствах*/

}
.t686 video {
  pointer-events: none;
}

.t686__container {
    max-width: var(--dbmTE100WidthContainer);
    margin: 0 auto;
    padding: 0 var(--dbmTE100PaddingContainer);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--dbmTE100GapCard);
}

.t686__container:before,
.t686__container:after,
.t686__separator{
    display: none !important;
}

.t686__container .t-card__col{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--dbmTE100TransitionCard);
}
.t686__container .t-card__col:hover{
    width: var(--dbmTE100WidthHoverCard) !important; /*Ширина блока при наведении*/
}

.t686__table {
    height: var(--dbmTE100HeightCardDesktop) !important; /*Высота блока*/
}

.t686__bg {
    display: var(--dbmTE100PreviewCard) !important;
}

.t686__container .t-card__col:hover .t686__bg{
    opacity: 0;
}

.t686__container video {
    object-fit: cover !important;
    height: 100%;
    width: 100%;
}

.customVideo {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    cursor: pointer;
    
}

.t686__overlay, .t686__textwrapper {
    display: block; /*Если нужно скрыть текст и прозрачную подложку, то укажите значение none*/
}


@media screen and (max-width: 960px){
    .t686__container{
        flex-wrap: var(--dbmTE100SliderMobile);
    }
    
    .t686__container .t-card__col {
        max-width: var(--dbmTE100WidthCardMobile) !important;
        width: var(--dbmTE100WidthCardMobile) !important;
        flex-shrink: 0;
    }
    
    .t686__container.t-card__container.t-container {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
  .t686 video {
    pointer-events: auto; 
    -webkit-tap-highlight-color: transparent;
  }
}

@media screen and (max-width: 640px){
    .t686__container{
        padding: 0 var(--dbmTE100PaddingContainerMobile);
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', () => {
  const containerBlocks = document.querySelectorAll('.t686__container .t-card__col .t686__cell');
  const videosArray = [
    //Здесь вставляем ссылки на ваши видео, они будут идти по порядку, в зависимости от количества карточек
    'https://files.dsgnmax.ru/designbymax/mods/1.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/2.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/3.mp4',
  ];

  let currentPlayingVideo = null;

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

const createVideoElement = (src, index) => {
  const videoContainer = document.createElement('div');
  videoContainer.classList.add('customVideo', `customVideo-${index + 1}`);

  const video = document.createElement('video');
  Object.assign(video, {
    muted: true,
    controls: false,
    preload: 'metadata',
    playsInline: true,
    style: 'width: 100%',
    loop: true, // false – видео не будет проигрываться бесконечно
  });

  video.addEventListener('loadedmetadata', () => {
    video.currentTime = 0.1;
  });

  const source = document.createElement('source');
  source.src = src;
  source.type = 'video/mp4';

  video.appendChild(source);
  videoContainer.appendChild(video);

  return { videoContainer, video };
};

  containerBlocks.forEach((block, index) => {
    const { videoContainer, video } = createVideoElement(
      videosArray[index % videosArray.length],
      index
    );

    block.appendChild(videoContainer);

    if (isMobile) {
      block.addEventListener('click', (e) => {
        e.stopPropagation();
        if (currentPlayingVideo && currentPlayingVideo !== video) {
          currentPlayingVideo.pause();
        }
        if (video.paused) {
          video.play();
          currentPlayingVideo = video;
        } else {
          video.pause();
          currentPlayingVideo = null;
        }
      });
    } else {
      block.addEventListener('mouseenter', () => video.play());
      block.addEventListener('mouseleave', () => video.pause());
    }
  });

  if (isMobile) {
    document.addEventListener('click', () => {
      if (currentPlayingVideo) {
        currentPlayingVideo.pause();
        currentPlayingVideo = null;
      }
    });
  }
})
</script>

   <!--https://dsgnmax.ru/useful/video-te100--> <style>
:root{
    --dbmTE100WidthContainer: 100vw; /*Ширина контейнера равна ширине экрана*/
    --dbmTE100PaddingContainer: 40px; /*Отступы по бокам от контейнера*/
    
    --dbmTE100HeightCardDesktop: 500px; /*Высотка карточек на десктопе*/
    --dbmTE100WidthHoverCard: 180%; /*Ширина карточки при наведении*/
    --dbmTE100TransitionCard: all 0.4s cubic-bezier(0.85, 0.05, 0.17, 0.93); /*Плавность анимации*/
    --dbmTE100GapCard: 20px; /*Отступ между карточками*/
    --dbmTE100PreviewCard: none; /*Отображение превью для карточек, если оно не нужно, то укажите значение none, если нужно – block*/
    
    --dbmTE100SliderMobile: nowrap; /*Если на мобильных устройствах вам не нужен слайдер, то просто поменяйте это значение nowrap на wrap*/
    /*Также, еси вам не нужен слайдер на мобильных устройства, то значение ниже нужно указать не в пикселях, а 100%, тогда карточки будут растягиваться на всю ширину экрана и выстраиваться друг под другом*/
    --dbmTE100WidthCardMobile: 320px; /*Ширина карточки на мобильных устройствах*/
    --dbmTE100PaddingContainerMobile: 20px; /*Отступы по бокам от контейнера на мобильных устройствах*/

}
.t686 video {
  pointer-events: none;
}

.t686__container {
    max-width: var(--dbmTE100WidthContainer);
    margin: 0 auto;
    padding: 0 var(--dbmTE100PaddingContainer);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--dbmTE100GapCard);
}

.t686__container:before,
.t686__container:after,
.t686__separator{
    display: none !important;
}

.t686__container .t-card__col{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--dbmTE100TransitionCard);
}
.t686__container .t-card__col:hover{
    width: var(--dbmTE100WidthHoverCard) !important; /*Ширина блока при наведении*/
}

.t686__table {
    height: var(--dbmTE100HeightCardDesktop) !important; /*Высота блока*/
}

.t686__bg {
    display: var(--dbmTE100PreviewCard) !important;
}

.t686__container .t-card__col:hover .t686__bg{
    opacity: 0;
}

.t686__container video {
    object-fit: cover !important;
    height: 100%;
    width: 100%;
}

.customVideo {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    cursor: pointer;
    
}

.t686__overlay, .t686__textwrapper {
    display: block; /*Если нужно скрыть текст и прозрачную подложку, то укажите значение none*/
}


@media screen and (max-width: 960px){
    .t686__container{
        flex-wrap: var(--dbmTE100SliderMobile);
    }
    
    .t686__container .t-card__col {
        max-width: var(--dbmTE100WidthCardMobile) !important;
        width: var(--dbmTE100WidthCardMobile) !important;
        flex-shrink: 0;
    }
    
    .t686__container.t-card__container.t-container {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
  .t686 video {
    pointer-events: auto; 
    -webkit-tap-highlight-color: transparent;
  }
}

@media screen and (max-width: 640px){
    .t686__container{
        padding: 0 var(--dbmTE100PaddingContainerMobile);
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', () => {
  const containerBlocks = document.querySelectorAll('.t686__container .t-card__col .t686__cell');
  const videosArray = [
    //Здесь вставляем ссылки на ваши видео, они будут идти по порядку, в зависимости от количества карточек
    'https://files.dsgnmax.ru/designbymax/mods/1.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/2.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/3.mp4', 
  ];

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  const createVideoElement = (src, index) => {
    const videoContainer = document.createElement('div');
    videoContainer.classList.add('customVideo', `customVideo-${index + 1}`);

    const video = document.createElement('video');
    Object.assign(video, {
      muted: true,
      controls: false,
      preload: 'metadata',
      playsInline: true,
      style: 'width: 100%',
      autoplay: isMobile,
      loop: true // Зацикливаем видео всегда
    });

    video.addEventListener('loadedmetadata', () => {
      video.currentTime = 0.1;
      if(isMobile) video.play();
    });

    if(!isMobile) {
      video.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        const playerVideo = document.createElement('video');
        playerVideo.src = src;
        playerVideo.controls = true;
        playerVideo.style.width = '100%';
        playerVideo.play();
        const existingVideo = videoContainer.querySelector('video');
        existingVideo.pause();
        videoContainer.replaceChild(playerVideo, existingVideo);
      });
    }
    
    const source = document.createElement('source');
    source.src = src;
    source.type = 'video/mp4';

    video.appendChild(source);
    videoContainer.appendChild(video);

    return { videoContainer, video };
  };

  containerBlocks.forEach((block, index) => {
    const { videoContainer, video } = createVideoElement(
      videosArray[index % videosArray.length],
      index
    );

    block.appendChild(videoContainer);

    if (!isMobile) {
      block.addEventListener('mouseenter', () => video.play());
      block.addEventListener('mouseleave', () => video.pause());
    }
  });
})
</script>

   <!--https://dsgnmax.ru/useful/video-te100--> <style>
:root{
    --dbmTE100WidthContainer: 100vw; /*Ширина контейнера равна ширине экрана*/
    --dbmTE100PaddingContainer: 40px; /*Отступы по бокам от контейнера*/
    
    --dbmTE100HeightCardDesktop: 500px; /*Высотка карточек на десктопе*/
    --dbmTE100WidthHoverCard: 180%; /*Ширина карточки при наведении*/
    --dbmTE100TransitionCard: all 0.4s cubic-bezier(0.85, 0.05, 0.17, 0.93); /*Плавность анимации*/
    --dbmTE100GapCard: 20px; /*Отступ между карточками*/
    --dbmTE100PreviewCard: none; /*Отображение превью для карточек, если оно не нужно, то укажите значение none, если нужно – block*/
    
    --dbmTE100SliderMobile: nowrap; /*Если на мобильных устройствах вам не нужен слайдер, то просто поменяйте это значение nowrap на wrap*/
    /*Также, еси вам не нужен слайдер на мобильных устройства, то значение ниже нужно указать не в пикселях, а 100%, тогда карточки будут растягиваться на всю ширину экрана и выстраиваться друг под другом*/
    --dbmTE100WidthCardMobile: 320px; /*Ширина карточки на мобильных устройствах*/
    --dbmTE100PaddingContainerMobile: 20px; /*Отступы по бокам от контейнера на мобильных устройствах*/

}
.t686 video {
  pointer-events: none;
}

.t686__container {
    max-width: var(--dbmTE100WidthContainer);
    margin: 0 auto;
    padding: 0 var(--dbmTE100PaddingContainer);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--dbmTE100GapCard);
}

.t686__container:before,
.t686__container:after,
.t686__separator{
    display: none !important;
}

.t686__container .t-card__col{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--dbmTE100TransitionCard);
}
.t686__container .t-card__col:hover{
    width: var(--dbmTE100WidthHoverCard) !important; /*Ширина блока при наведении*/
}

.t686__table {
    height: var(--dbmTE100HeightCardDesktop) !important; /*Высота блока*/
}

.t686__bg {
    display: var(--dbmTE100PreviewCard) !important;
}

.t686__container .t-card__col:hover .t686__bg{
    opacity: 0;
}

.t686__container video {
    object-fit: cover !important;
    height: 100%;
    width: 100%;
}

.customVideo {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    cursor: pointer;
    
}

.t686__overlay, .t686__textwrapper {
    display: block; /*Если нужно скрыть текст и прозрачную подложку, то укажите значение none*/
}


@media screen and (max-width: 960px){
    .t686__container{
        flex-wrap: var(--dbmTE100SliderMobile);
    }
    
    .t686__container .t-card__col {
        max-width: var(--dbmTE100WidthCardMobile) !important;
        width: var(--dbmTE100WidthCardMobile) !important;
        flex-shrink: 0;
    }
    
    .t686__container.t-card__container.t-container {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
  .t686 video {
    pointer-events: auto; 
    -webkit-tap-highlight-color: transparent;
  }
}

@media screen and (max-width: 640px){
    .t686__container{
        padding: 0 var(--dbmTE100PaddingContainerMobile);
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', () => {
  const containerBlocks = document.querySelectorAll('.t686__container .t-card__col .t686__cell');
  const videosArray = [
  //Здесь вставляем ссылки на ваши видео, они будут идти по порядку, в зависимости от количества карточек
    'https://files.dsgnmax.ru/designbymax/mods/1.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/2.mp4',
    'https://files.dsgnmax.ru/designbymax/mods/3.mp4',
  ];

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  const createVideoElement = (src, index) => {
    const videoContainer = document.createElement('div');
    videoContainer.classList.add('customVideo', `customVideo-${index + 1}`);

    const video = document.createElement('video');
    Object.assign(video, {
      muted: true, // Важно для автоматического воспроизведения на мобильных устройствах
      autoplay: true, // Автовоспроизведение
      controls: false,
      preload: 'metadata',
      playsInline: true, // Отключить автоматическое открытие в полноэкранном режиме на мобильных устройствах
      style: 'width: 100%',
      loop: true, // Бесконечное воспроизведение
    });

    video.addEventListener('loadedmetadata', () => {
      video.currentTime = 0.1;
    });

    const source = document.createElement('source');
    source.src = src;
    source.type = 'video/mp4';

    video.appendChild(source);
    videoContainer.appendChild(video);

    return { videoContainer, video };
  };

  containerBlocks.forEach((block, index) => {
    const { videoContainer, video } = createVideoElement(
      videosArray[index % videosArray.length],
      index
    );

    block.appendChild(videoContainer);
    video.play();
  });
});
</script>