0

Tengo una serie de cards, que al ser clickeadas muestran un modal con un video. Esta información proviene de un JSON y está enlazada mediante handlebars. El problema radica en que los videos se siguen reproduciendo aún cuando se cierra el modal. Mi intención es controlar eso mediante la API de YouTube (que ya está en mi sitio, ya que controla otros dos videos estáticos). No estoy usando Bootstrap. Sí jQuery.

HTML

<script id="card-partial" type="text/x-handlebars-template">
    <figure class="card">
        <div class="img-container img-toggler" id="{{ga_img}}">
            <img src="assets/img/tips/{{image}}" alt="">
        </div>
        <figcaption>
            <p>
                {{text}}
            </p>
            <div class="social-container">
                <a href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $server_host ?>/tips/{{id}}" target="_blank" class="fa fa-facebook" id="{{ga_facebook}}"></a>
                <a href="https://twitter.com/intent/tweet?text={{text}}&url=http://<?php echo $server_host ?>/tips/{{id}}" target="_blank" class="fa fa-twitter" id="{{ga_twitter}}"></a>
            </div>
        </figcaption>
        <div class="card-modal">
            <i class="fa fa-close"></i>
            {{#if youtube_id}}
                <div class="video-embedder" id="tip-video">
                    <iframe width="560" height="349" src="https://www.youtube.com/embed/{{youtube_id}}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
                </div>
                {{else}}
                    <img src="assets/img/tips/{{image_mob}}" class="hide-for-large" alt="">
                    <img src="assets/img/tips/{{image_desk}}" class="show-for-large" alt="">
            {{/if}}
        </div>
    </figure>
</script>

JS

(function(window) {

    function toggleCardModal() {

        $('.img-toggler').each(function(index) {
            var $this = $(this);
            var $modal = $this.siblings('.card-modal');

            $this.click(function() {
                var itemPosition = $(window).scrollTop() + 'px';
                $modal.addClass('open').css('top', itemPosition);
                $('main').addClass('canvas-open');
            })

            $modal.find('.fa-close').click(function() {
                console.log(player3)
                player3.stopVideo();
                $modal.removeClass('open');
                $('main').removeClass('canvas-open');
            })
        });
    }

    window.toggleCardModal = toggleCardModal;
}(window));

1 respuesta 1

1

Para parar el reproductor de youtube puedes utilizar el siguiente fragmento:

$('.video-embedder iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');

Entonces agregando eso dentro de la función del click en .fa-close quedaría de la siguiente manera:

(function(window) {

    function toggleCardModal() {

        $('.img-toggler').each(function(index) {
            var $this = $(this);
            var $modal = $this.siblings('.card-modal');

            $this.click(function() {
                var itemPosition = $(window).scrollTop() + 'px';
                $modal.addClass('open').css('top', itemPosition);
                $('main').addClass('canvas-open');
            })

            $modal.find('.fa-close').click(function() {
                $(this).parent().find('.video-embedder iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
                $modal.removeClass('open');
                $('main').removeClass('canvas-open');
            })
        });
    }

    window.toggleCardModal = toggleCardModal;
}(window));

Nota

Esta solución es la que existe por ahora pero a lo largo de los años fue cambiando de diferentes formas a cómo se puede pausar un video en youtube.


Ejemplo de play, pause y stop

Acá te dejo un jsFiddle en el que podes ver cómo hacer estos tres casos de reproducir, pausar y parar un video con Youtube API.

6
  • Excelente! Era eso precisamente lo que buscaba. Muchísimas gracias! Commented el 2 may. 2018 a las 20:10
  • Comenzó funcionando esta solución, pero ahora ya no funciona. Bastante raro realmente. En la consola me da el siguiente error Uncaught TypeError: Cannot read property 'postMessage' of undefined. Commented el 3 may. 2018 a las 16:21
  • Se lo estás pasando como variable o como string el postMessage?
    – Kleith
    Commented el 3 may. 2018 a las 17:06
  • Perdón, yo sólo agregué la línea de código que me sugeriste. Tenía que agregar el postMessage en otro lado? Commented el 3 may. 2018 a las 17:20
  • Perdón, leí mal. Ya sé cuál es el error, no puse el iframe en el selector, ahí modifico la respuesta.
    – Kleith
    Commented el 3 may. 2018 a las 17:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.