I’m looking for a creative way to replace an HTML5 video with an image under a few circumstances. Don’t want to deal with flash or anything like that to make the video work… would rather give them an image.
Give them the image if:
-
If the desktop browser doesn’t support HTML5 video
-
If the user is mobile
Seems simple… especially by using Modernizr for css tags with display:none; if the video isn’t supported … so here’s the caveat: The HTML5 video is edge to edge and centered to the screen with JavaScript and I’d like the image to have the same behavior.
My initial thought was simple: poster attribute. Works on an iPad and iPhone 3/3gs, but is playable on an iPhone 4.. Also, doesn’t work on IE, which apparently says “I don’t know what this is” and doesn’t even bother with the poster.
I’ve got a test set up at http://kzmnt.com/test/
Looking forward to your advice!
Used a media query after about 1100px and replaced it with an image using css background size set to cover!