I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like Spotify's homepage background but cannot seem to make it work.
My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.
My current code is:
<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">
#videohome {
position:absolute;
height: 100%;
width: 100%;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0">
<source src="./homepage.mp4" type="video/mp4" />
</video>
</body>
</html>
You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.
CSS:
.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}
.videoPlayer {
min-height: 100%;
//min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}
HTML:
<div class="container"><video class="videoPlayer">Code goes here</video></div>
Use object-fit: cover in the container
Oldie but a goldie. Have been struggling with this myself but found that aspect-ratio media queries do the job nicely.
If media queries aren't supported, the video will still cover the page but won't scale properly.
If translateX, translateY or #supports isn't supported, the video won't be centered.
HTML:
<div class="cover">
<video autoplay loop mute poster="path/to/image.jpg">
<source src="path/to/video.mp4" type="video/mp4" />
<source src="path/to/video.webm" type="video/webm" />
<source src="path/to/video.ogv" type="video/ogg" />
<img src="path/to/image.jpg" alt="" />
</video>
</div>
CSS:
.cover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.cover img, .cover video {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
#supports (transform: translateX(-50%)) {
.cover img, .cover video {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
#media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
#media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
I found this:
http://wesbos.com/css-object-fit/
Use object-fit: cover; on your video tag
It worked for me.
Related
Hello I have been trying to overlay an image on top of a video in a resizable container. I have tried many examples but each seems specific to the implementation.. My latest test is here https://jsfiddle.net/1Lfsy95w/ I can't get the video size to be correct and the image is out of the bounds.. Both should remain 16:9 aspect ratio, and be be resized of parent
#player-overlay {
display:block;
position: absolute;
width: 100%;
height: auto;
z-index: 4;
opacity: .5;
}
#OutputVideo {
display: block;
z-index: 1;
background-color:red;
width: 100%;
max-height:100%;
height:auto;
}
And the html
<div id="wrapper">
<img id="player-overlay" src="https://images.unsplash.com/photo-1580757468214-c73f7062a5cb"/>
<video id="OutputVideo">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
</video>
</div>
Absolutely-positioned elements are set with with respect to the nearest non-static ancestor. You need to set position on your wrapper:
#wrapper {
position: relative;
}
To keep the image from pushing the wrapper below the video, hide overflow:
#wrapper {
position: relative;
overflow: hidden;
}
Fiddle demo
You can simplify things a bit by 1) putting the image as a background, and 2) moving the overlay after the video. This gives you more sizing flexibility and eliminates the need to fiddle with z-index.
#wrapper {
position: relative;
}
#player-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
background-image: url(https://...);
background-position: center;
background-size: cover;
}
<div id="wrapper">
<video controls id="OutputVideo">
<source src="http://....webm" type="video/webm">
</video>
<div id="player-overlay"></div>
</div>
Fiddle demo 2
i want to create a video container that covers the whole screen
and the video inside the container covers the whole container and doesn't overflow means container adapts the whole screen size.
and is responsive accordingly.
currently the video is taking its full height..i don't want that
i want its height to be limited to the screen size and there is no scroll.
my html code is
<div class="video-container">
<div class="video-wrapper">
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
my css code is :
.video-container {
display: block;
max-width: 100%;
min-width: 200px;
}
.video-wrapper {
background: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
z-index: 0;
}
.video-container video {
border-radius: inherit;
height: auto;
vertical-align: middle;
width: 100%;
}
video {
max-width: 100%;
object-fit: contain;
}
please help me with this problem..thanks in advance.
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
video {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML:
<body>
<script src="./index.js"></script>
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
A meta tag like this helps:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You need to change your width and height, CSS features the possibility for view height and view width, so it fits the screen. As already mentioned above:
.video-wrapper{
height: 100vh;
width: 100vh;
}
I'm using the videojs.com video player and it works great the only problem is that I want the video player to be the full-screen size instead of using pixels like for example if you are on a smaller screen the video player looks messed up.
I tried to use 100% instead of px but it also messed up a lot.
Is there some other way I can make it fit the whole screen automatically?
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
poster="FF7.png"
data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
Check the Codepen here
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
You can use a parent div container for your video, so it acts like a cross browser anchor for your video. Also you can use the media query min-aspect-ratio and max-aspect-ratio.
Codepen example with editor:
http://codepen.io/jonathan/pen/bEbdmz/?editors=110
Codepen example in fullscreen mode:
http://codepen.io/jonathan/full/bEbdmz/
The HTML
<div id="video-wrapper">
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px" poster="FF7.png" data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
</div>
The CSS:
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#video-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
#video-wrapper > #player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor:pointer;
}
#media (min-aspect-ratio: 16/9) {
#video-wrapper > #player {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
#video-wrapper > #player {
width: 300%;
left: -100%;
}
}
And if you want a JavaScript fullscreen solution you could use some of the following:
http://vodkabears.github.io/vide/
http://dfcb.github.com/BigVideo.js/
http://syddev.com/jquery.videoBG/
I am using the video HTML5 tag on a responsive website. I set the height and width to 100% and it works fine except in the mobile version where it's destroying the layout.
URL: omob-2.myshopify.com
<div style="height: 100%; width: 100%;">
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video>
</div>
Any ideas?
You can use both the max-width property or object-fit property to achieve this. See references: Using the object-fit property and Using the max-width property with fill-available
/* Using fill-available on the max-width property */
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
max-width: -webkit-fill-available;
max-width: fill-available;
}
/* The object-fit property defines how an element responds to the height
and width of its content box.*/
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
height: 100%;
object-fit: cover;
}
On devices that don't support the video tag you would show a image instead. There is a answer for this here How can I display an image if browser does not support HTML5's <video> tag
Edit: set the width and height in the css styles instead of the video tag. Set the width only, so to keep dimensional proportion, like this.
video {
width: 100%;
height: auto !important;
}
Use the CSS3 transform translate(-50%, -50%) to make the video in the center of the page:
Html Code
<div class="video-container">
<video autoplay loop="true" width="1280" height="720">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS Code
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
background: #000;
color: #fff;
font-family: 'Oxygen', sans-serif;
}
See here the demo.
I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.
It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.
I need the video to replace the colored boxes:
The colored boxes are atm just, CSS boxes.
Pure CSS method
It is possible to center a video inside an element just like a cover sized background-image without JS using the object-fit attribute or CSS Transforms.
2021 answer: object-fit
As pointed in the comments, it is possible to achieve the same result without CSS transform, but using object-fit, which I think it's an even better option for the same result:
.video-container {
height: 300px;
width: 300px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Previous answer: CSS Transform
You can set a video as a background to any HTML element easily thanks to transform CSS property.
Note that you can use the transform technique to center vertically and horizontally any HTML element.
.video-container {
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Why not fix a <video> and use z-index:-1 to put it behind all other elements?
html, body { width:100%; height:100%; margin:0; padding:0; }
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="video" style="width:100%; height:100%">
....
</video>
</div>
<div class='content'>
....
Demo
If you want it within a container you have to add a container element and a little more CSS
/* HTML */
<div class='vidContain'>
<div class='vid'>
<video> ... </video>
</div>
<div class='content'> ... The rest of your content ... </div>
</div>
/* CSS */
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
Demo
I believe this is what you're looking for. It automatically scaled the video to fit the container.
DEMO: http://jsfiddle.net/t8qhgxuy/
Video need to have height and width always set to 100% of the parent.
HTML:
<div class="one"> CONTENT OVER VIDEO
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>
<div class="two">
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>
CSS:
body {
overflow: scroll;
padding: 60px 20px;
}
.one {
width: 90%;
height: 30vw;
overflow: hidden;
border: 15px solid red;
margin-bottom: 40px;
position: relative;
}
.two{
width: 30%;
height: 300px;
overflow: hidden;
border: 15px solid blue;
position: relative;
}
.video-background { /* class name used in javascript too */
width: 100%; /* width needs to be set to 100% */
height: 100%; /* height needs to be set to 100% */
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
JS:
function scaleToFill() {
$('video.video-background').each(function(index, videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height(),
val;
if (videoRatio < tagRatio) {
val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
} else if (tagRatio < videoRatio) {
val = videoRatio / tagRatio * 1.02;
}
$video.css('transform','scale(' + val + ',' + val + ')');
});
}
$(function () {
scaleToFill();
$('.video-background').on('loadeddata', scaleToFill);
$(window).resize(function() {
scaleToFill();
});
});