There is a page on which several videos from youtuba. Video output using foreach. How to make it so that you can only play one video, while others would stop?

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

1 answer 1

In general, so.

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>

Pay attention to ?enablejsapi=1&version=3&wmode=transparent - you need to run the YouTube API, and also the fact that each iframe has its own id , through which we then find the player.

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>

The first script connects the YouTube API. The second contains the required logic.

In WordPress scripts must be included in 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 );

The second script without <script></script> be placed in the youtube_switch.js file in the theme folder.

A working example is here .