Pausar un vídeo de Vimeo al darle PLAY a otro vídeo en la misma página

¿Quieres saber cómo pausar un vídeo de Vimeo al darle PLAY a otro vídeo dentro en la misma página? No te preocupes, es algo que podemos hacer con unas simples líneas de código gracias a la API de Vimeo. ¡Vamos a verlo!

Es realmente molesto tener varios vídeos de Vimeo en una página y que al darle PLAY a uno, otros se sigan reproduciendo. Lo ideal es que, al darle PLAY a un vídeo, el otro, que ya estaba en PLAY, se pause para que no se monten las reproducciones y sonidos uno sobre otro. Este código lo puedes probar en nuestra página de Formaciones, donde tenemos varios vídeos de Vimeo, pero al darle play a uno, el resto se pausa.

La solución consiste en decirle a Vimeo a través de su API que, cuando se está reproduciendo un vídeo, si pulsamos en PLAY de otro vídeo, el resto de vídeos de una página deben pausarse. Lo puedes ver en acción aquí.

Este script lo debes añasir al final de la página en la que están tus vídeos. Si usas maquetadores visuales lo puedes hacer fácilmente con WPBakery, Elementor o DIVI, seleccionando la opción de añadir código javascript o JS. Copiarías ya añadirías este código:

Código JS para pausar un vídeo de Vimeo al darle PLAY a otro vídeo:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    // Obtener todos los iframes de Vimeo en la página
    var iframes = document.querySelectorAll('iframe[src*="player.vimeo.com"]');
    var players = [];

    // Crear una instancia de reproductor para cada iframe de Vimeo
    iframes.forEach(function(iframe) {
        var player = new Vimeo.Player(iframe);
        players.push(player);

        // Escuchar el evento 'play' y pausar los otros vídeos
        player.on('play', function() {
            players.forEach(function(p) {
                if (p !== player) {
                    p.pause(); // Pausar los otros vídeos que no están reproduciéndose
                }
            });
        });
    });
</script>

Función PHP para pausar un vídeo de Vimeo al darle PLAY a otro vídeo:

Si no puedes añadir código javascript a tu página, puedes utilizar esta función de PHP que debes añadir al functions.php de tu plantilla. Es muy importante que cambies el ID de la página por la página en la que tienes tus vídeos. Así, el código cargará solamente en la página en la que tienes los vídeos y no en toda la web ya que no tiene sentido cargar código innecesario en todas las páginas.

// Agregar código en el footer solo para una página específica
function add_vimeo_script_to_footer() {
    if (is_page(1998)) { // Verificar si la página actual tiene el ID 1998
        echo '<script src="https://player.vimeo.com/api/player.js"></script>';
        echo '<script>
            // Obtener todos los iframes de Vimeo en la página
            var iframes = document.querySelectorAll(\'iframe[src*="player.vimeo.com"]\');
            var players = [];

            // Crear una instancia de reproductor para cada iframe de Vimeo
            iframes.forEach(function(iframe) {
                var player = new Vimeo.Player(iframe);
                players.push(player);

                // Escuchar el evento \"play\" y pausar los otros vídeos
                player.on(\'play\', function() {
                    players.forEach(function(p) {
                        if (p !== player) {
                            p.pause(); // Pausar los otros vídeos que no están reproduciéndose
                        }
                    });
                });
            });
        </script>';
    }
}
add_action('wp_footer', 'add_vimeo_script_to_footer');