JavaScript (Tubular video background) не всегда загружается и запускается. Иногда это делает

Question

У меня есть немного JavaScript на моем сайте Weebly.com. Одним из них является Tubular, который добавляет видео-фон к выбранному элементу. Но он не всегда загружается правильно и не всегда работает. Иногда это происходит, обычно не при обновлении, а когда я открываю новое окно в Chrome и загружаю сайт.

Что может быть причиной того, что JavaScript не всегда загружается и запускается?

• Код Tubular и демонстрации (хотя работает на JSFiddle): JSFiddle

Что я вижу в Chrome, нажимая CTRL+SHIFT+J.

Calling CSSStyleSheet.insertRule() with one argument is deprecated. Please pass the index argument as well: insertRule(x, 0).

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) (index):1

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) (index):1

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://www.youtube.com') does not match the recipient window's origin ('https://www.youtube.com').

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://www.youtube.com') does not match the recipient window's origin ('https://www.youtube.com').

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://www.youtube.com') does not match the recipient window's origin ('https://www.youtube.com'). www-widgetapi-vflZ5Tu3E.js:26

Мой порядок загрузки сценариев во внешних файлах находится непосредственно перед закрывающим тегом body, над остальными сценариями.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="/files/theme/jquery_tubular.js"></script>
<script type="text/javascript" src="/files/theme/smoothscroll.js"></script>
<script type="text/javascript" src="/files/theme/bigtext.js"></script> 

Это скрипт в моем HTML-файле, который требует видео. Трубчатый код находится в jquery_tubular.js. Смотрите код в ссылке JSFiddle выше.

<script type="text/javascript"> 
        jQuery().ready(function() {
        jQuery('#video-bg').tubular({videoId: 'a2pu_xhBnzY’});
        }); 
</script> 

Answer 1

"Эта проблема (я считаю) связана с тем, что API YT не запускает готовое событие".

Просто измените window.onYouTubeIframeAPIReady = function() в функции setTimeout

window.onYouTubeIframeAPIReady = function() {
     setTimeout(function(){
        player = new YT.Player('tubular-player', {
            width: options.width,
            height: Math.ceil(options.width / options.ratio),
            videoId: options.videoId,
            playerVars: {
                controls: 0,
                showinfo: 0,
                modestbranding: 1,
                wmode: 'transparent'
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    },600);
  };

Я нашел решение здесь: https://code.google.com/p/jquery-tubular/issues/detail?id=31