Last active
June 24, 2025 15:56
-
-
Save baslie/31d506b462663fdecc1adc3736dbadca to your computer and use it in GitHub Desktop.
Автоматическая пауза YouTube-видео при переключении (для Тильды и не только)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- ********************************************************************** --> | |
| <!-- Автоматическая пауза YouTube-видео при переключении --> | |
| <!-- ********************************************************************** --> | |
| <!-- Скрипт для нескольких YouTube-плееров, который при запуске одного --> | |
| <!-- видео автоматически ставит на паузу все остальные на странице. --> | |
| <!-- Использует YouTube API для управления плеерами. Стили опциональны. --> | |
| <!-- ********************************************************************** --> | |
| <style> | |
| /* | |
| Стили здесь «для красоты» — для скрипта они не нужны. Это просто как | |
| пример работы с двумя видео на странице. Видео может быть сколько угодно. | |
| */ | |
| .uc-video-container { | |
| text-align: center; | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .uc-video-wrapper { | |
| display: inline-block; | |
| width: 560px; | |
| max-width: 560px; | |
| min-width: 280px; | |
| margin: 0 10px 20px 10px; | |
| vertical-align: top; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 315px; | |
| border: none; | |
| } | |
| @media (max-width:768px) { | |
| .uc-video-wrapper { | |
| display: block; | |
| width: 100%; | |
| max-width: 100%; | |
| margin: 0 0 20px 0; | |
| } | |
| iframe { | |
| height: 200px; | |
| } | |
| } | |
| @media (max-width:480px) { | |
| iframe { | |
| height: 180px; | |
| } | |
| } | |
| </style> | |
| <div class="uc-video-container"> | |
| <div class="uc-video-wrapper"> | |
| <iframe class="uc-yt-player" id="player1" src="https://www.youtube.com/embed/9bZkp7q19f0?enablejsapi=1&playsinline=1&rel=0" allow="autoplay; encrypted-media" allowfullscreen> | |
| </iframe> | |
| </div> | |
| <div class="uc-video-wrapper"> | |
| <iframe class="uc-yt-player" id="player2" src="https://www.youtube.com/embed/G7g8kNazmkI?enablejsapi=1&playsinline=1&rel=0" allow="autoplay; encrypted-media" allowfullscreen> | |
| </iframe> | |
| </div> | |
| </div> | |
| <!-- 1. API YouTube --> | |
| <script src="https://www.youtube.com/iframe_api" defer></script> | |
| <script> | |
| /* 2. Коллекция плееров */ | |
| const players = []; | |
| /* 3. Функция-колбэк YouTube API */ | |
| function onYouTubeIframeAPIReady() { | |
| document.querySelectorAll('.uc-yt-player').forEach(el => { | |
| players.push(new YT.Player(el.id, { | |
| playerVars: { playsinline: 1 }, | |
| events: { onStateChange: handleState } | |
| })); | |
| }); | |
| } | |
| /* 4. Авто-пауза */ | |
| function handleState(evt) { | |
| if (evt.data === YT.PlayerState.PLAYING) { | |
| players.forEach(p => { | |
| if (p !== evt.target && | |
| p.getPlayerState && | |
| p.getPlayerState() === YT.PlayerState.PLAYING) { | |
| p.pauseVideo(); | |
| } | |
| }); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment