.custom-catalog-videos {
margin-top: 30px;
margin-bottom: 40px;
clear: both;
}
/* Независимая сетка: 3 в ряд на ПК, 1 на мобильных */
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
}
@media (max-width: 767px) {
.video-grid {
grid-template-columns: 1fr; /* На мобильных - одна колонка */
gap: 30px;
}
}
.video-preview-wrapper {
position: relative;
cursor: pointer;
border-radius: 12px; /* Скругление как у карточек Аспро */
overflow: hidden;
background-color: #f8f9fa;
/* Строгая пропорция 9:16 */
aspect-ratio: 9 / 16;
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Тень для карточки */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-preview-wrapper:hover {
transform: translateY(-5px); /* Эффект поднятия при наведении */
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.video-preview-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Затемнение и кнопка Play поверх видео */
.play-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.video-preview-wrapper:hover .play-overlay {
background: rgba(0,0,0,0.4);
}
/* Иконка Play */
.play-icon {
width: 60px;
height: 60px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 4px; /* Визуальное центрирование треугольника */
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.play-icon svg {
width: 24px;
height: 24px;
fill: #333;
}
/* Скрываем overlay, когда видео воспроизводится */
.video-preview-wrapper.is-playing .play-overlay {
display: none;
}
document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.video-preview-wrapper');
wrappers.forEach(function(wrapper) {
var video = wrapper.querySelector('video');
wrapper.addEventListener('click', function() {
// Если видео на паузе - запускаем
if (video.paused) {
// Ставим на паузу другие видео, если они играют (опционально)
wrappers.forEach(function(w) {
var v = w.querySelector('video');
if (v !== video && !v.paused) {
v.pause();
w.classList.remove('is-playing');
v.removeAttribute('controls');
}
});
// Включаем контролы и запускаем текущее
video.setAttribute('controls', 'controls');
video.play();
wrapper.classList.add('is-playing');
}
});
});
});