HTML5 video poster image not scaling fullscreen on iPad retina -
i have fullscreen video on website. on ipads want load poster image fullscreen well. markup , css have works on low-res ipad mini, doesn't display full-screen on ipad retina.
html...
<video autoplay poster="/images/styles/vid_home_screenshot.jpg" id="bgvid" loop> <source src="/video/globe_vid_main_1280x720_v4.mp4" type="video/mp4" /> <source src="/video/globe_vid_main_1280x720_v4.webm" type="video/webm" /> <source src="/video/globe_vid_main_1280x720_v4.ogv" type="video/ogg" /> </video>
this css on video element...
video {position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transition: 1s opacity; top: 0; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); }
position: fixed; bottom: 0; min-width: 100%; min-height: 100%; width:auto; height:auto; z-index: -100; background-size: cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
Comments
Post a Comment