CODEWITHSUNDEEP
html
Rex
Rex

Reputation: 101

Making a full-screen sized responsive video div

I'm trying to make a website with a video that shows at the top of the page at full height and full width (not a background – I want to have other divs showing after it). I want it to zoom at the center of the video according to the browser size. I have tried out numerous solutions all over SO and other sites, and I still can't find one that meets my needs.

Everything I found so far was either a non-fullscreen div or a background.

HTML

<div class="header-unit">
            <div id="video-container">
                <video autoplay loop class="fillWidth">
                    <source src="video1.webm" type='video/webm' />
                    <source src="video1.mp4" type='video/mp4' />
                    Your browser does not support HTML5 video. Please upgrade your browser!
                </video>
            </div>
</div>

CSS

.header-unit 
{
    height:100%;
    width:100%;
    position: relative;
}

#video-container 
{
    position: absolute;
}

#video-container 
{
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
}

video 
{
    position:absolute;
    z-index:0;
}

video.fillWidth
{
    width: 100%;
}

jsfiddle

How could I do this?

Thanks!

EDIT 1: I wanted to resize the video so that the height and width of any browser is filled entirely, enlarging at the center if necessary.

Upvotes: 0

Views: 5338

Answers (2)

Mukul Kant
Mukul Kant

Reputation: 7122

You should try like this -

*{
  margin: 0;
  padding: 0;
}

video.fillWidth
{
	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%);
	background-size: cover;
	  
}
<div class="header-unit">
    <div id="video-container">
        <video autoplay loop class="fillWidth">
            <source src="http://www.w3schools.com/html/mov_bbb.webm" type='video/webm' />
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
            Your browser does not support HTML5 video. Please upgrade your browser!
        </video>
    </div>
</div>


<div class="wrap">
    <h1>here other tag</h1>    
</div>

Hope it will helps you.

Upvotes: 1

Ben Looi
Ben Looi

Reputation: 178

You tried width:100vw ;height:100vh ?

Upvotes: 0

Related Questions