jquery.mb.YTPlayer.js не работает после загрузки начальной страницы с помощью InstantClick.js

Question

Есть ли способ сделать jquery.mb.YTPlayer.js работы после начальной загрузки страницы с InstantClick.js?

Плагин прекрасно работает при начальной загрузке страницы, но после этого он больше не работает.

Вот как я первоначально инициализируются его, прекрасно работает на странице загрузки, но не после дальнейшей навигации:

app.js

InstantClick.on('change', function() { 
     $(".player").mb_YTPlayer(); 
}); 

Затем я проводил часы на попытке отладки и в итоге получилось примерно так:

приложение.js

InstantClick.on('change', function() { 
    if ($(".mbYTP_wrapper")[0]){ 
     $(".player").playerDestroy(); 
     console.log('destroyed'); 
    } 
    if (window.YT) { 
     console.log(window.YT); 
    } 

    $(".player").mb_YTPlayer(); 
}); 

в jquery.mb.YTPlayer.js Я попытался добавить это .playerDestroy:

playerDestroy: function() { 
     jQuery("#YTAPI").remove(); 
} 

На начальной странице загрузки объекта окна. YT, конечно, не существует, но затем после первой навигации страницы я получаю 1 объект, затем я получаю 2 объекта для 1, затем я получаю 3 объекта и т. Д. На рисунке ниже показано 4 страницы навигации, 10 window.YT объектов.

Answer 1

Я проверил обоих плагинов, которые вы используете, и пришел к выводу, что проблема с вашими коды получения перезагружается на каждой навигации.

Чтобы решить эту проблему, попробуйте использовать атрибут data-no-instant для скриптов, которые необходимо загрузить только один раз. Это может включать в себя следующее:

Youtube виджете: <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflr-TgN1/www-widgetapi.js" async="" data-no-instant></script>

Youtube API: <script src="https://www.youtube.com/player_api?v=2.7.6" id="YTAPI" data-no-instant></script>

JQuery библиотека: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" data-no-instant></script> плагин

YT игрока: <script type="text/javascript" src="inc/jquery.mb.YTPlayer.js" data-no-instant></script>

InstantClick плагин: <script src="instantclick.min.js" data-no-instant></script>

Помещенные следующие коды Too внутри: <script data-no-instant></script>

Также подпортить ваш YT экземпляр игрока на MouseUp и touchend событий.

$(body).on('mouseup touchend',".player",function(){ 
    $(".player").playerDestroy(); 
}); 

И повторно инициализировать YT-плеер при событии InstantClick change.

InstantClick.on('change',function(){ 
    $(".player").mb_YTPlayer(); 
}); 

Если вы это сделаете, я думаю, что проблема должна быть решена.