Есть страница, на которой несколько видео с youtuba. Видео выводятся с помощью foreach. Как сделать так, чтобы можно было одно видео только воспроизвести, а другие останавливались бы?
<iframe class="video_groups" width="100%" height="100%" src="<?php echo get_post_meta($post->ID, 'mytextarea', true); ?>" frameborder="0" allowfullscreen></iframe>
В общем так.
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
в папку темы.
Работающий пример здесь.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Добрый день всем! Помогите решить проблему) Есть кусок кода
В приведённом вами коде нет ошибок, вот рабочий пример:
В общем, есть 6 блоков, при клике на блок, он должен стать синим, вот мой скрипт
Всем приветПодскажите пожалуйста способы закрытия модального окна по клику на кнопку? У меня есть скрипт, который именно это и делает, но после...