Bootstrap 5 (для читателей, доходящих до этого из документы Bootstrap)
Это старый вопрос Bootstrap 3, но я не нашел каких-либо ответов, которые касались бы управления воспроизведением.
Как указано в документации Bootstrap, этот вопрос предназначен для решения проблемы модального окна требуется дополнительный JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д.
Видео YouTube будет работать должным образом в модальном окне Bootstrap, если вы используете iframe вместо элемента video для предотвращения ошибок CORS. Однако iframe не имеет атрибутов для видео, таких как autoplay, loop, etc..., что означает, что единственными элементами управления воспроизведением являются те, которые встроены в видео YouTube. Например, вы не можете autostart просматривать видео при открытии модального окна (autostart = 1 больше не работает из YT API)
Здесь объясняется новый подход к управлению воспроизведением видео на YouTube. Вот как это будет работать с воспроизведением видео внутри модального окна Bootstrap 5.
Модальная разметка
<div class="modal fade" id="dynamicVideoModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="ratio ratio-21x9" id="player">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-dark" id="playBtn">Play</button>
<button type="button" class="btn-dark" id="pauseBtn">Pause</button>
</div>
</div>
</div>
</div>
JavaScript
var player
function onYouTubeIframeAPIReady() {
console.log('onYouTubeIframeAPIReady...')
player = new YT.Player('player', {
videoId: 'M7lc1UVf-VE', // YT video source
playerVars: {
'playsinline': 1
},
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()
})
Bootstrap 5, демонстрация воспроизведения YouTube
person
Zim
schedule
11.06.2021
