My Video Background Won't Play in Safari?

[StephBertha]

Hi there,

I was playing around trying to get this to work. It works great in Firefox, but doesn’t budge in Safari.

http://stephaniebertha.com/clients/videobg/

What am I missing?

[StephBertha]

Oh, it’s working for you? Interesting. I’m on a Windows 7 PC and Safari is just showing the “poster” image, but the video isn’t playing. Although I’m using Safari 5.1.7; it won’t let me update to a higher version of Safari.

[Beverleyh]

Just in case its useful to you, here is some info for video/audio use in Safari: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

It’s worth noting that you get the circular “play” triangle in iPhone/iPod, which can look a bit hinky in an otherwise sleek design, so if you’re going that route, maybe hide the video element (and consequently, the play icon) offscreen with negative margins in small screen devices?

The page also details what Shane said about there being no autoplay over mobile/cellular networks (to help preserve data allowance). Media only plays if the user sets it going manually.

Just wondering too, have you thought about maybe making the video responsive too? “object-fit” is coming on in CSS (like background-size:cover; for videos). It isn’t quite there yet though but you can fudge some aspect-ratio media queries in to the mix and come up with a pretty workable pseudo background-size:cover; for video http://fofwebdesign.co.uk/template/_testing/fullscreen-video/

Hope that helps

[Author]

Posts