YouTube iframe не отображается после повторного открытия модала с помощью IFrame Player API

Question

Я создал сайт, который загружает YouTube, html5 видео и Vimeo. У меня возникли проблемы с Youtube с помощью API. Видео загружено по модалу. С первого клика плеер вроде работает. Но после закрытия и открытия снова, iframe больше не будет загружаться. Вот мой код: HTML: <div class="youtube-video video-view" id="R7JnYfAhwXk"></div>

Сценарий:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = {};
window.onYouTubeIframeAPIReady = function() {
    var yt = $('.youtube-video');
    yt.each(function(){        
        players[$(this).attr('id')] = new YT.Player($(this).attr('id'),
            { 
                videoId: $(this).attr('id'), 
                height: '135',
                width: '249',
                events: { 
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            }
        );
    });
}

function onPlayerReady(event) {
    //event.target.playVideo();
}
function onPlayerStateChange(event) {

}

См. Изображение для дополнительной справки: При первом нажатии При втором нажатии После закрытия модального режима

Дополнительная информация: модальный режим удаляется при закрытии. Я попытался удалить API YouTube на модальное закрытие, но проблема все еще возникает.

function hideModal()
{    
    $('.modal.in').remove();
    $( '.modal-backdrop' ).remove();
    $( 'body' ).removeClass( "modal-open" );
    $('html').find('script').filter(function(){
      return $(this).attr('src') === 'https://www.youtube.com/iframe_api'
    }).remove();
}

Любая помощь приветствуется. Спасибо.