Replace video element with static image on Mobile Safari. #441
Conversation
Adding height: auto to fix image sizing bug
Remove unused classes & variable.
centered header sizing updates. Fixes 3421
Updates to tile pattern and post gallery button fixes.
Adding margin to h2 tags after ul tags
…group all PostCSS tasks together.
This allows "full-width" modal content to work without a negative margin.
This allows overflow scrolling to work nicely on Safari & iOS.
The box-shadow won’t render out of page, so this creates a minor visual glitch in Safari/iOS rubber band scrolling.
Media Options refactoring
Modal mini-refactor
Modernizr build filename
Move modal and validation code into separate repos.
Update style guide for Heading pattern.
|
Looks good! Also, agreed with browser-sniffing for this. |
|
So it's only an idiosyncrasy in a very particular context which applies to us specifically. In any other scenario where video is used on mobile safari, having a click to play makes sense so you don't force a download of the video to an unsuspecting mobile user. It just happens to affect us on the homepage, because our tiles are clickable.... Could there potentially be something we could do with the video controls API with JavaScript? I know you can tap into video controls and affect the visual display of the video controls... maybe that could lead us on the path to a better solution and avoid browser-sniffing? Not sure... |
|
I agree that the non-standard behavior is a usability win for users, but I think it's also a bit unfortunate that Safari ignores the spec for disabling controls on a iOS 8 adds a proprietary CSS pseudo-element that we can target, but that still leaves a visual gotcha for iOS 7 users. I'm all for other solutions, but having trouble finding good ones. |
|
With our powers combined... |
|
we can hopefully find a solution! Oh yeah, and... |
DFurnes
force-pushed
the
dev
branch
2 times, most recently
from
2109e12 to
56344f1
Compare
Changes
videotags within a tile with a staticimgbased on their poster or fallback image.For review: @DoSomething/front-end
Discussion
I think this is an appropriate scenario for browser-sniffing, since it's not really a "feature" we're trying to detect but an idiosyncrasy with how a particular browser treats a standard tag. Thoughts?