Для автоматического воспроизведения видео с YouTube в модальном окне с использованием YouTube IFrame Player API, вы можете следовать приведённым ниже шагам. Заметьте, что в соответствии с политиками автоматического воспроизведения браузера (autoplay policies), автоматическое воспроизведение часто разрешено только при условии, что звук отключен, и это поведение может варьироваться в различных браузерах.
1. Подключите YouTube IFrame Player API:
```html
<script src="https://www.youtube.com/iframe_api"></script>
```
2. При открытии модального окна создайте экземпляр плеера YouTube и установите параметр `autoplay` в `1`:
```javascript
// Допустим, у вас есть функция для открытия модального окна
function openModalWithVideo(videoId) {
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
playerVars: {
'autoplay': 1, // Автоматическое воспроизведение
'controls': 1, // Показывать элементы управления
'mute': 1 // Заглушить видео (может потребоваться для некоторых браузеров)
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
onYouTubeIframeAPIReady();
}
// Предположим, у вас есть обработчик щелчка по ссылке,
// который вызывает функцию openModalWithVideo с ID видео YouTube.
```
3. ID элемента `<div>` (или `<iframe>`), который вы передаёте в `YT.Player`, должен совпадать с ID, указанным в вашем HTML:
```html
<div id="player"></div>
```
4. Убедитесь, что у вас нет других вызовов `onYouTubeIframeAPIReady()` где-либо в коде, потому что это глобальная функция, и её можно вызвать только один раз.
5. При закрытии модального окна стоит уничтожить плеер с помощью метода `player.destroy()`, чтобы не оставлять лишние экземпляры плееров:
```javascript
function closeModal() {
if (player) {
player.destroy();
}
}
```
Если вы всё ещё сталкиваетесь с проблемами, удостоверьтесь в следующем:
- Ваши браузеры разрешают автопроигрывание с аудио. Если нет, могут потребоваться дополнительные разрешения (или отключение звука).
- Вы используете правильный `videoId`.
- Не блокирует ли браузер YouTube API или вызовы IFrame API по каким-либо причинам.
- Проверьте консоль браузера на наличие ошибок JavaScript, которые могут помешать исполнению вашего кода.