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));