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);        } 

ipad mini screenshot (looks correct)

ipad retina screenshot (looks incorrect, same site)

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

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -