Search code examples
csshtmlhtml5-videohtml5-fullscreen

Responsive Fullscreen HTML5 Video Issue

I'm trying to implement a fullscreen html5 video splash/landing page, it works great on desktop browsers except it leaves a black bar/space under the video.

Problem is when testing playback on smaller screens or mobile devices, it breaks the responsiveness and fails to show the poster image. I'm sure this is a fairly simple fix, however, it's the first time working with HTML5 Video.

Using the following CSS:

video {
position: absolute;
z-index: 0;
width: 100%;
height: auto;
}

And the following HTML:

<video autoplay="" loop="" muted="" poster="img/poster.jpg">
        <source src="video/energycrisis.mp4" type="video/mp4">
        <source src="video/energycrisis.webm" type="video/webm">
        <source src="video/energycrisis.ogg" type="video/ogg">
</video>

I've tried changing the CSS to:

video {
position: absolute;
z-index: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}

This CSS covers the viewport entirely with the video which is the desired result, but again, it overflows on both desktop and responsive, furthermore breaking the responsive layout.

Any help would be greatly appreciated.

Solution

  • Thanks @sdcr for the info, It didn't work out unfortunately, your css was providing me with similar results.

    I have however found a beautifully easy fix! Typically, I've spent hours, and today when I get home, I fix it in 5 mins with a cup of tea.

    By far the easiest method, using a plugin that consists of a simple bit of jQuery code.

    http://vodkabears.github.io/vide/

    Thanks for the help anyway, I hope this is useful to someone else.