1

I'm using the tubular plugin (http://www.seanmccambridge.com/tubular/) to create a subtle html video background. This works in Chrome, but in Safari 7 on Mac, the video won't start.

I've narrowed it down to the z-index being the reason of why safari won't autostart the video. When I change the z-index of the tubularContainer (defaults to 1) to a value above my other content (e.g. 9999) the video starts just fine.

var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top: 0;"></div>';

Does anyone know how to circumvent this safari behaviour? It's as if the video won't start when there's content above it with z-index.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Jorre
  • 17,273
  • 32
  • 100
  • 145

2 Answers2

2

I've been hacking apart jQuery Tubular for a project that requires full-screen YouTube videos that ended up going a lot farther than I initially thought. I ran into this as well and couldn't simply swap out the plugin due to having already altered Tubular to provide callbacks and other features.

This is how I fixed safari:

window.onYouTubeIframeAPIReady = 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',
            rel: 0,
            autoplay: 1,
            html5: 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

(this is code altered directly in jquery.tubular.js)

The main thing to notice is the html5: 1 which encourages the use of the HTML5 player. I don't know why Safari was defaulting to using Flash but it was and that was the problem for me. Apparently there's some "battery-saving" mode that affects plugins like Flash.

Ryan Bosinger
  • 1,832
  • 2
  • 16
  • 25
  • Thanks! Perfect for a quick fix. For some reason I found replacing the original Tubular JS with the above fixed it in Safari, but then broke it in Chrome. I just used a conditional on the browsers and made use of both, might be useful for others http://stackoverflow.com/questions/7944460/detect-safari-browser – cupcakekid Sep 09 '14 at 10:50
0

The plugin seems incompatible with Safari's Power Saving feature. Safari won't even play the video on their own homepage..

I use Jquery-MB-YTPlayer instead

Kevin Grabher
  • 399
  • 1
  • 4
  • 18