I am attempting to create a fullscreen webpage with a video using the following code:
<video id="backgroundvideo" autoplay controls>
<source src="{% path video, 'reference' %}" type="video/mp4">
</video>
Here is the CSS I am using:
#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 to view the page on my Android phone (5 inch), the video does not display properly, but it works fine on an iPhone 4. I suspect there may be a css-related issue causing this problem.
Could you provide assistance in fixing this issue or suggest another solution?