Question

85

Place video with 100% height & 100% width using css or javascript

rated 0 times [ 88] [ 3] / answers: 1 / hits: 21943 / 10 Years ago, wed, february 18, 2015, 12:00:00

I want to place a html5 video (with the video tag of course) with 100% width and 100% height which will play in the background. Here is an example with an image and I want exactly the same with a video, I just didn't find out how to do that:

#image {

    background-image: url(image.jpg);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

}

JSFiddle: http://jsfiddle.net/u9ncpyfu/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jerome

Add To Favorites

Follow

Total Points: 592

Total Questions: 98

Total Answers: 101

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

answered 10 Years ago gideons · Accepted Answer

You may try:

header {

    position: relative;

    background-size: cover;

    background-position: 50% 50%;

    height: 100vh;

    z-index: 0;

}

header h1 {

    text-align: center;

    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;

    color: #fff

}

header video {

    -webkit-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    -o-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -100;

}

<header>

    <h1>Sample Title</h1>

	<video autoplay loop class=bg-video>

		<source src=https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4 type=video/mp4>

	</video>

</header>

It will keep the aspect ratio and the video centered while always fully covering the container.

Here's a fiddle working example.

Hope it helps :)