I'm trying to create a site where I have a background video playing with some HTML5.
This is all working perfectly, it works just the way I want it.
But I also want to keep the image centered on the screen, even when a user resizes the browser.
<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>
I got this to work with some jQuery, but was wondering if there is a CSS solution for this.
function resizeHandler() {
// scale the video
var documentHeight = $(document).height();
var documentWidth = $(document).width();
var ratio = $('#video').width() / $('#video').height();
if((documentWidth / documentHeight) < ratio) {
$('#video').css({
'width': 'auto',
'height': '100%',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginRight = $('#video').width() - $(document).width();
$('#video').css('left', -marginRight);
} else {
$('#video').css({
'width': '100%',
'height': 'auto',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginTop = $('#video').height() - $(document).height();
$('#video').css('top', -marginTop);
}
}
This is the jQuery I wrote to stretch the image to fit the screen, and to keep the image sort of centered.
Not sure if this is possible in CSS, but if somebody knows how to, this might be nice.
This question just have been referenced into Place video with 100% height & 100% width using css or javascript
I guess my answer for that could be the one you were looking for?
Here's the code:
header {
position: relative;
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>
And here's a working fiddle example.
Hope it'll help someone else :)
I would try centering the video with position absolute inside of a fixed wrapper. So for example:
Place your video inside of a fixed wrapper with 100% width and height:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Center the video inside of an extra large area with margin auto:
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
And stretch it to full size with min-width and min-height:
#video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
Here the final result:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<div id="video-wrap">
<video id="video" loop autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Here also a jsfiddle.
This should make #video the entire size of the viewport and remain there when the user scrolls.
#video {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Use Css Property. object-fit: cover;
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
video {
height: 100%;
width: 100%;
}
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
Related
Problem: When I resize my browser window, my already well aligned video will keep filling the screen while sustaining aspect ratio, as long as the width of the window is larger than the height. When the height of the window starts to get larger than the width, whitespace will appear on the top and bottom of the video.
My Code: I´m currently using the following CSS Code for the below HTML code:
.bgvideodiv {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: center;
-webkit-filter: blur(5px) brightness(50%);
-moz-filter: blur(5px) brightness(50%);
-o-filter: blur(5px) brightness(50%);
-ms-filter: blur(5px) brightness(50%);
filter: blur(5px) brightness(50%);
overflow: hidden !important;
}
.bgvideo {
height: 100%;
min-width: 100%;
width: auto;
/* Same: object-fit: fill; */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.scaler {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: center;
overflow: hidden;
transform: scale(1.2);
}
<div class="scaler">
<div class="bgvideodiv">
<video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
<source src="hero.mp4" type="video/mp4"></source>
<source src="hero.webm" type="video/webm"></source>
</video>
</div>
</div>
(You will have to add your own video mp4 and webm for this snippet to work)
I´d prefer a pure CSS solution, but JS / jQuery is fine, too.
I´VE FOUND A SOLUTION FOR THIS; SEE BELOW.
try this
.bgvideo {
width: 100%;
height: auto;
/* Same: object-fit: fill; */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%)
}
Hope this might help :)
.bgvideodiv {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgvideodiv video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="bgvideodiv">
<video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
<source src="hero.mp4" type="video/mp4">
<source src="hero.webm" type="video/webm">
</video>
</div>
Turns out bulma, the CSS Framework I´m using, automatically applies a max-width: 100%; rule to all video, img, object, embed and iframe objects (out of no reason, as it seems). I´ve disabled the rule with the following snippet, insert it anywhere below the embedding of bulma:
embed, iframe, img, object, video {
max-width: none;
}
Any max-width rules which should override this value will have to be placed below this one.
Everything is working fine now, thanks for any suggestions anyway.
If you're using the CSS Framework Bulma and/or Buefy, you need to modify 3 elements in order to adjust the embedded video. Change your main.css file to:
embed,
iframe,
video {
height: 400px; /* adjust pixels if needed */
max-width: 100%;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
Please tell me how you can implement this possibility, depending on the width of the browser screen, the height of the video tag always kept 70%. Through css, I could not do it.
The video itself is on the full width of my screen. I would like to do this on js
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
CSS
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
Try to use this css code:
video {height: 70vw;}
You can set sizes like vw or vh which is the viewportWidth or viewportHeight
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
.video-cont video {
height: 70vw;
}
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
You can get the browser screen width in javascript by using window.screen.width or screen.width and then do the necessary calculations.
I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.
I've tried the solution posted here with no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?
This shows what is going on:
https://jsfiddle.net/kae4q601/
.jumbotron{
position: relative;
/* Tried setting the height. Didnt work either */
/* height: 200px; */
}
#video-background {
position: absolute;
bottom: 50%;
right: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<video id="video-background" preload muted autoplay loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<div class="container">
Hello World
</div>
</div>
Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.
.jumbotron{
position: relative;
z-index:-101;
}
Next some cleaner simpler code for the video background like so:
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width:100%;
}
Here's the fiddle https://jsfiddle.net/kae4q601/5/ Let me know if this is what you were trying to achieve.
Since .jumbotron has a grey background, setting the the video background to z-index: -1000; will make the video display behind the grey background, thus invisible. Also, when making video backgrounds cover, the parent needs to have overflow:hidden, not the video itself.
CSS:
.jumbotron{
position: relative;
overflow: hidden;
height: 200px;
}
.container {
position: relative;
color: #ffffff;
z-index: 2; /* Show content above video */
}
#video-background{
position: absolute;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 1;
}
Here is a working fiddle: https://jsfiddle.net/kae4q601/15/
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/
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 :)
If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
This may need to be adjusted for responsiveness.
Check out this jsfiddle.
Edit:
If you also want the video to remain centered, then wrap it in a container like so:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<div id="video-wrap"><video id="video">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Here also a jsfiddle.
Set
top: 0;
left: 0;
right: 0;
bottom: 0;
You can forget about height: 100%, it only stretches to contain 100% of a div's interior content.
Easy if you give the HTML and BODY a height of 100%.
WORKING JSFIDDLE DEMO
html,
body {
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
video {
height: 100%;
width: 100%;
}
<video controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
I've this html:
<div id="container">
<video id="video" src="video.ogv" loop></video>
</div>
Div "container" and video fills all screen
#container {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
#container video {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
The monitor where I'm testing is 1920x1080 while video is 1280x720: obviously I obtain two black border (top and bottom).
How can I view video without borders and without stretching it?
I've already search on so, like here, but is not my case.
Edit
I had forgotten min-width: and min-height proprerties, as HoangHieu suggest!
CSS become:
#container video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
you can use properties : min-width: and min-height: