Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #196322
    StephBertha
    Participant

    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?

    #196340
    StephBertha
    Participant

    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.

    #196435
    Beverleyh
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.