Встраивание видео YouTube в модальные компоненты Bootstrap возвращает ошибку 153. ⇐ Javascript

[Anonymous]

Я изучаю документацию по начальной загрузке, дошел до этой части. Встраивание видео с YouTube.
Чтобы понять эту часть, мне пришлось сделать пример.
Вот моя разметка и код:

Код: Выделить всё

EMBED YOUTUBE VIDEOS IN MODAL






Simple Harmonic Differential Equations



 



Play
Pause






Watch Video


// Source - https://stackoverflow.com/a/67938749
// Posted by Carol Skelly, modified by community. See post 'Timeline' for change history
// Retrieved 2025-11-30, License - CC BY-SA 4.0

var player
function onYouTubeIframeAPIReady() {
console.log('onYouTubeIframeAPIReady...')
player = new YT.Player('player', {
videoId: 'Z_ijEh-oYDs', // YT video source
playerVars: {
'playsinline': 1,
'start': 92 // start at 92 seconds
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
})
}

function onPlayerReady(event) {
event.target.playVideo() // autostart
}

function onPlayerStateChange(event) {
// do other custom stuff here by watching the YT.PlayerState
}

function loadYouTubeVideo() {
// 2.  This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

var myModalEl = document.getElementById('dynamicVideoModal')
myModalEl.addEventListener('show.bs.modal', function (event) {
// dynamically create video when modal is opened
loadYouTubeVideo()
})

// optional hooks for controls outside YT
var playBtn = document.getElementById('playBtn')
playBtn.addEventListener('click', function (event) {
console.log('play')
player.playVideo()
})

var pauseBtn = document.getElementById('pauseBtn')
pauseBtn.addEventListener('click', function (event) {
console.log('pause')
player.pauseVideo()
})

Когда я захожу в браузер, я вижу это:


Если я нажму кнопку, я получу:


Что мне следует делать со своей разметкой и кодом, чтобы иметь возможность смотреть видео непосредственно из модального компонента?
Разница между этим вопросом и вопросом здесь заключается в том, что этот вопрос более конкретен относительно встраивания видео YouTube в модальные компоненты Bootstrap, а другой касается общей проблемы конфигурации YouTube Error 153 при встраивании видео. Некоторые ответы на этот вопрос не применимы в этом контексте, а некоторые, которые могут понравиться добавлению политики реферера, не сработали.
Я думаю, что другой вопрос хорош для людей, создающих приложения, а этот хорош для новичков, изучающих начальную загрузку.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -error-153