html - Video fullscreen in html5 -

i trying make fullscrren page video.this code:

 <video  id="backgroundvideo" autoplay controls>             <source src="{% path video, 'reference' %}" type="video/mp4">          </video> 

the css :

  #backgroundvideo {             position: fixed;             top: 50%;             left: 50%;             min-width: 100%;             min-height: 100%;             width: auto;             height: auto;             z-index: -100;             -webkit-transform: translatex(-50%) translatey(-50%);             transform: translatex(-50%) translatey(-50%);          } 

when trying open page on phone android (5 inch) doesn't work, opening iphone 4 works. think problem related css.

can me fix or can give me solution?

since don't how doesn't work, i'm not sure how you. however:

    top: 50%;     left: 50%; 

if going fullscreen, why position video 50% down, , 50% right? top: 0; left: 0; seems more logical. missing something?

   min-width: 100%;    min-height: 100%;    width: auto;    height: auto; 

not sure want here, fullscreen == full screen, why tell browser can decide how size video? if want full screen, width: 100%; height: auto; should do. mind you, because ratio may different screen's, may bars top/bottom. think that's better stretching video anyway.

i'm not sure, don't lot video , support spotty across board, think code may confusing browser.

-webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%); 

are counteracting 50%? why?

anyway, whatever issue here, video support 1 of things still , in 'browser war' realm. things own way.

look solution serving compatible video (almost) all. comes decent css steal... mean, 'learn from'. ;-)

http://mediaelementjs.com/