- This topic is empty.
February 19, 2015 at 2:16 pm #196322StephBerthaParticipant
I was playing around trying to get this to work. It works great in Firefox, but doesn’t budge in Safari.
What am I missing?February 19, 2015 at 3:06 pm #196340StephBerthaParticipant
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.February 20, 2015 at 6:42 am #196435BeverleyhParticipant
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
- The forum ‘CSS’ is closed to new topics and replies.