Video fullscreen in html5
<p>I am trying to make a fullscrren page with a video.This is my code:</p>

<pre><code> &lt;video  id="backgroundvideo" autoplay controls&gt;
            &lt;source src="{% path video, 'reference' %}" type="video/mp4"&gt;

        &lt;/video&gt;
</code></pre>

<p>The css is :</p>

<pre><code>  #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%);

        }
</code></pre>

<p>When I am trying to open the page on my phone with android (5 inch) it doesn't work, but opening with Iphone 4 it works.
I think the problem is related to css.</p>

<p>Can you help me fix it or can you give me another solution?</p>