Вопроизведение только одного ролика youtube на странице

276
01 марта 2017, 21:28

Есть страница, на которой несколько видео с youtuba. Видео выводятся с помощью foreach. Как сделать так, чтобы можно было одно видео только воспроизвести, а другие останавливались бы?

<iframe class="video_groups"  width="100%" height="100%" src="<?php echo get_post_meta($post->ID, 'mytextarea', true); ?>" frameborder="0" allowfullscreen></iframe>
Answer 1

В общем так.

HTML

<iframe id="player0" class="video_groups" src="https://www.youtube.com/embed/jebJ9itYTJE?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
<iframe id="player1" class="video_groups" src="https://www.youtube.com/embed/HjxYvcdpVnU?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="video_groups" src="https://www.youtube.com/embed/6v2L2UGZJAM?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Обратите внимание на ?enablejsapi=1&version=3&wmode=transparent - нужно для запуска YouTube API, а также на то, что каждый iframe имеет свой id, через который потом находим плеер.

JS

<script type='text/javascript' src='https://www.youtube.com/iframe_api'></script>
<script>
    var players = new Array(3);
    function onYouTubeIframeAPIReady() {
        players[0] = new YT.Player('player0', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        players[1] = new YT.Player('player1', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        players[2] = new YT.Player('player2', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
    function onPlayerReady() {
//        console.log("hey Im ready");
        players[1].playVideo();
    }
    function onPlayerStateChange(event) {
        var link = event.target.a.id;
        var newstate = event.data;
//        console.log("I am " + link + " My state changed to " + newstate);
        if (newstate == YT.PlayerState.PLAYING) {
            players.forEach(function(item, i) {
                if (item.a.id != link) item.pauseVideo();
            });
        }
    }
</script>

Первый скрипт подключает YouTube API. Второй содержит требуемую логику.

В WordPress скрипты надо подключать в functions.php.

function function_enqueue_scripts() {
    wp_enqueue_script('youtube.iframe.api', 'https://www.youtube.com/iframe_api', array('jquery'));
    wp_enqueue_script('youtube_switch', get_stylesheet_directory_uri() . '/youtube_switch.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'function_enqueue_scripts', 0, 10 );

Второй скрипт без тегов <script></script> поместить в файл youtube_switch.js в папку темы.

Работающий пример здесь.

READ ALSO
Добавить класс корзине если она не пуста

Добавить класс корзине если она не пуста

Добрый день всем! Помогите решить проблему) Есть кусок кода

247
Не получается отправить post запрос json

Не получается отправить post запрос json

В приведённом вами коде нет ошибок, вот рабочий пример:

314
Переключение цветов блока по клику

Переключение цветов блока по клику

В общем, есть 6 блоков, при клике на блок, он должен стать синим, вот мой скрипт

298
Закрытие всплывающего окна js

Закрытие всплывающего окна js

Всем приветПодскажите пожалуйста способы закрытия модального окна по клику на кнопку? У меня есть скрипт, который именно это и делает, но после...

537