T
<![CDATA[<style>
.object[data-type="points"] .point {
transform: scale(2);
}
.object[data-type="points"] .point-zone {
display: none
}
.object[data-type="points"] .point-text p {
font-size: 20px !important;
line-height: 20px !important;
}
</style>
]]> <![CDATA[<style>
.video-modal-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: rgba(0, 0, 0, 0.75);
box-sizing: border-box;
}
.video-modal-overlay.is-open {
display: flex;
}
.video-modal-content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 960px;
max-height: calc(100vh - 80px);
}
.video-modal-stage {
position: relative;
width: auto;
height: auto;
opacity: 0;
transform: scale(0.985);
pointer-events: none;
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-modal-overlay.is-loaded .video-modal-stage {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.video-modal-player {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 25px;
background: transparent;
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.25),
0 10px 28px rgba(0, 0, 0, 0.18);
}
.video-modal-loader {
position: fixed;
left: 50%;
top: 50%;
z-index: 1000000;
transform: translate(-50%, -50%);
opacity: 1;
transition: opacity 0.25s ease;
pointer-events: none;
}
.video-modal-overlay.is-loaded .video-modal-loader {
opacity: 0;
}
.video-modal-spinner {
width: 42px;
height: 42px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.22);
border-top-color: rgba(255, 255, 255, 0.9);
animation: video-modal-spin 0.8s linear infinite;
}
@keyframes video-modal-spin {
to {
transform: rotate(360deg);
}
}
.video-modal-close {
all: unset;
position: fixed;
top: 28px;
right: 28px;
z-index: 1000001;
width: 36px;
height: 36px;
cursor: pointer;
opacity: 0.86;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
display: block;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.video-modal-close:hover {
opacity: 1;
transform: scale(1.05);
background: transparent !important;
}
.video-modal-close::before,
.video-modal-close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 1px;
background: #fff;
border-radius: 999px;
transform-origin: center;
}
.video-modal-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.video-modal-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
body.video-modal-open {
overflow: hidden;
}
@media (max-width: 767px) {
.video-modal-overlay {
padding: 32px 16px;
}
.video-modal-player {
border-radius: 18px;
}
.video-modal-close {
top: 18px;
right: 18px;
}
}
</style>
<script>
(function ($) {
// =========================
// Мапа видео — редактировать тут
// =========================
var VIDEO_PREFIX = 'https://autonoe.studio/videos/';
var VIDEO_MAP = {
1: '05_Balenciaga_18.mp4',
2: 'avito_master_4х3.mp4',
3: '24_KFC.mp4',
4: '02_afr_yacht.mp4',
5: '20_Tefal.mp4',
6: '15_versaille.mp4',
7: '25_samokat.mp4',
8: '07_cartier.mp4',
9: '17_silwet.mp4',
10: 'sumsub-04-v01.mp4',
11: '16_Creange.mp4',
12: '08_coastal_transit_movie.mp4'
};
var currentAspectRatio = 16 / 9;
var fallbackTimer = null;
function initVideoModal() {
$('.video-modal-overlay').remove();
$('body').append(`
<div class="video-modal-overlay" aria-hidden="true">
<button class="video-modal-close" type="button" aria-label="Закрыть"></button>
<div class="video-modal-content">
<div class="video-modal-stage">
<video class="video-modal-player" controls playsinline preload="auto"></video>
</div>
</div>
<div class="video-modal-loader">
<div class="video-modal-spinner"></div>
</div>
</div>
`);
bindVideoEvents();
}
function bindVideoEvents() {
var video = $('.video-modal-player').get(0);
if (!video) return;
video.onloadedmetadata = function () {
if (video.videoWidth && video.videoHeight) {
var aspectRatio = video.videoWidth / video.videoHeight;
setStageSize(aspectRatio);
}
};
video.onplaying = function () {
showVideo();
};
video.oncanplay = function () {
showVideo();
};
video.onloadeddata = function () {
showVideo();
};
}
function getStageSize(aspectRatio) {
var viewportPaddingX = window.innerWidth <= 767 ? 32 : 40;
var viewportPaddingY = window.innerWidth <= 767 ? 64 : 80;
var maxWidth = Math.min(960, window.innerWidth - viewportPaddingX);
var maxHeight = window.innerHeight - viewportPaddingY;
var width = maxWidth;
var height = width / aspectRatio;
if (height > maxHeight) {
height = maxHeight;
width = height * aspectRatio;
}
return {
width: Math.max(width, 260),
height: Math.max(height, 146)
};
}
function setStageSize(aspectRatio) {
currentAspectRatio = aspectRatio || 16 / 9;
var size = getStageSize(currentAspectRatio);
$('.video-modal-stage').css({
width: size.width + 'px',
height: size.height + 'px'
});
}
function showVideo() {
var $modal = $('.video-modal-overlay');
if (!$modal.hasClass('is-open')) return;
if ($modal.hasClass('is-loaded')) return;
$modal.addClass('is-loaded');
}
function openVideoModal(videoNumber) {
var fileName = VIDEO_MAP[videoNumber];
if (!fileName) {
console.warn('Видео не найдено:', videoNumber);
return;
}
var src = VIDEO_PREFIX + fileName;
var $modal = $('.video-modal-overlay');
var $stage = $('.video-modal-stage');
var video = $('.video-modal-player').get(0);
if (!video) return;
clearTimeout(fallbackTimer);
$modal.removeClass('is-loaded');
$stage.removeAttr('style');
$modal.addClass('is-open').attr('aria-hidden', 'false');
$('body').addClass('video-modal-open');
video.pause();
video.removeAttribute('src');
video.load();
video.muted = false;
video.volume = 1;
video.src = src;
video.currentTime = 0;
video.load();
var playPromise = video.play();
if (playPromise && playPromise.catch) {
playPromise.catch(function (err) {
console.warn('Autoplay не запустился:', err);
// Если браузер заблокировал автозапуск,
// показываем видео с controls, чтобы можно было нажать play.
showVideo();
});
}
// Железный fallback: если события video почему-то не пришли,
// но видео уже начало грузиться/играть — показываем его.
fallbackTimer = setTimeout(function () {
if ($modal.hasClass('is-open') && !$modal.hasClass('is-loaded')) {
if (video.readyState >= 2 || !video.paused) {
showVideo();
}
}
}, 1200);
}
function closeVideoModal() {
var $modal = $('.video-modal-overlay');
var $stage = $('.video-modal-stage');
var video = $('.video-modal-player').get(0);
clearTimeout(fallbackTimer);
if (video) {
video.pause();
video.currentTime = 0;
video.removeAttribute('src');
video.load();
}
$modal
.removeClass('is-open is-loaded')
.attr('aria-hidden', 'true');
$('body').removeClass('video-modal-open');
$stage.removeAttr('style');
currentAspectRatio = 16 / 9;
}
$(document).ready(function () {
initVideoModal();
$(document).off('.videoModal');
$(window).off('.videoModal');
$(document).on('click.videoModal', '[name^="video-"]', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var match = name && name.match(/^video-(\d+)$/);
if (!match) return;
openVideoModal(Number(match[1]));
});
$(document).on('click.videoModal', '.video-modal-close', function (e) {
e.preventDefault();
closeVideoModal();
});
$(document).on('click.videoModal', '.video-modal-overlay', function (e) {
if ($(e.target).hasClass('video-modal-overlay')) {
closeVideoModal();
}
});
$(document).on('keydown.videoModal', function (e) {
if (e.key === 'Escape' && $('.video-modal-overlay').hasClass('is-open')) {
closeVideoModal();
}
});
$(window).on('resize.videoModal', function () {
if ($('.video-modal-overlay').hasClass('is-open')) {
setStageSize(currentAspectRatio);
}
});
});
})(jQuery);
</script>]]>