/* ========================================================================== Общие стили YouTube-блоков: модалка + кнопка «Play». Handle: autoschool-youtube-modal (подключается через viewStyle блоков). ========================================================================== */ /* ---------- Модалка (создаётся youtube-modal.js в конце ) ---------- */ .autoschool-yt-modal .modal-dialog { position: relative; z-index: 11; max-width: 1200px; } .autoschool-yt-modal .modal-body.popup__overlay { padding: 0; } .autoschool-yt-modal .btn-close-modal { position: absolute; right: 0; z-index: 1; width: 100%; max-width: 34px; height: 100%; max-height: 38px; font-size: 26px; font-weight: 700; line-height: 1; color: red; background-color: #fff; border: 0; opacity: 1; cursor: pointer; } .autoschool-yt-modal .btn-close-modal::before { content: "×"; } .autoschool-yt-modal .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .autoschool-yt-modal .embed-responsive::before { display: block; padding-top: 56.25%; /* 16:9 */ content: ""; } .autoschool-yt-modal .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Кнопка «Play» ---------- */ :is(.block-youtube-one, .block-youtube-swiper-carusel) .play_video { position: absolute; top: 50%; left: 50%; z-index: 999; width: 100%; max-width: 130px; height: 110px; margin: -55px 0 0 -70px; overflow: hidden; border-radius: 0 0 110px 110px; } /* Ссылка на всю площадь круга — пульс и треугольник на прежних местах. */ :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button { position: absolute; inset: 0; display: block; cursor: pointer; } :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button::before { position: absolute; top: 50%; left: 50%; z-index: 0; display: block; width: 80px; height: 80px; content: ""; background: #f12222; border-radius: 50%; transform: translateX(-50%) translateY(-50%); animation: autoschool-yt-pulse 1500ms ease-out infinite; } /* Внутренний круг. В старом CSS у него не было рамки (опечатка без «;» отключала border и border-radius) — внешний вид сохранён как на сайте. */ :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button::after { position: absolute; top: 50%; left: 50%; z-index: 1; display: block; width: 60px; height: 60px; content: ""; transform: translateX(-50%) translateY(-50%); transition: all 200ms; } :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button span { position: absolute; top: 35px; left: 50px; z-index: 3; display: block; width: 0; height: 0; margin-left: 7px; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 30px solid #fff; } @keyframes autoschool-yt-pulse { 0% { opacity: 1; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); } } @media (prefers-reduced-motion: reduce) { :is(.block-youtube-one, .block-youtube-swiper-carusel) .video-play-button::before { animation: none; } }