0

I have some JavaScript on my Weebly.com site. One is Tubular, which adds a video background to the element selected. But it doesn’t always load correctly and doesn’t always run. Sometimes it does, usually not when refreshing, but when I open a new window in Chrome and load the site.

What can be the causes of JavaScript not always being loaded and run?

  • Code of Tubular and demonstration (works on JSFiddle though): JSFiddle

What i see in Chrome while pressing 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

My loading order of scripts on external files is just before the closing body tag, above the rest of the scripts.

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

This is the script in my HTML file that calls for the video. The Tubular code is in jquery_tubular.js. See the code in the JSFiddle link above.

<script type="text/javascript"> 
        jQuery().ready(function() {
        jQuery('#video-bg').tubular({videoId: 'a2pu_xhBnzY’});
        }); 
</script>
John Slegers
  • 45,213
  • 22
  • 199
  • 169
vikar
  • 27
  • 1
  • 12

1 Answers1

0

"This issue is (I believe) to do with the YT api not firing its ready event."

Just change the window.onYouTubeIframeAPIReady = function() in a setTimeout Function

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

I found the solution here: https://code.google.com/p/jquery-tubular/issues/detail?id=31

LimeSoft
  • 1
  • 1
  • 3