2

Есть модальное окно на CSS, в нём — карусель видео с YouTube.
Используется Blueimp Gallery. При закрытии модального окна воспроизведение продолжается.

Есть ли возможность остановки всех или текущего видео, не зная его ID? Догадываюсь, что это делается средствами YouTube Player API, типа player.pauseVideo():Void, но как его правильно использовать? Куда сунуть и где взять ID текущего видео?

UPD: есть вот такие данные из описания:

var youTubeOptions = {
    // The list object property (or data attribute) with the YouTube video id:
    youTubeVideoIdProperty: 'youtube',
    // Optional object with parameters passed to the YouTube video player:
    // h t t p s ://developers.google.com/youtube/player_parameters
    youTubePlayerVars: undefined,
    // Require a click on the native YouTube player for the initial playback:
    youTubeClickToPlay: true
};    

----------    

blueimp.Gallery([
    {
        title: 'A YouYube video',
        href: 'h t t p s://www.youtube.com/watch?v=VIDEO_ID',
        type: 'text/html',
        youtube: 'VIDEO_ID',
        poster: 'h t t p s://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg'
    },
    {
        title: 'Banana',
        href: 'h t t p s://example.org/images/banana.jpg',
        type: 'image/jpeg',
        thumbnail: 'h t t p s://example.org/thumbnails/banana.jpg'
    }
]);

1 ответ 1

3

РЕШЕНО! при условии что API youtube включены.

Небольшая функция с использованием JQuery останавливающая любые видео во фреймах. Подходит для автоматической остановки видео во фрэйме при закрытии пользователем модального окна.

<!-- HTML -->

<body>
...
<div id="close_vid">
   <img src="img/closem.png"/>
</div>
...
</body>
<script>
$(document).on('click', '#close_vid', function(){
   jQuery("iframe").each(function() {
      jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')});
});

Вот рабочий пример на JSFiddle

При этом видео нужно передать гет-параметр ?enablejsapi=1:

<iframe src="https://www.youtube.com/embed/4fce6nKsjXo?enablejsapi=1"></iframe>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.