I'm using object-fit:cover to play background video on my website (scroll down). Firefox and Chrome are displaying it correctly, but Edge not - although it supports the object-fit property.
.sec-content > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bg-video {
position: absolute;
z-index:4;
left: 0;
top: 0;
width: calc(50% + 400px);
height: 100%;
}
.bg-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
box-sizing: border-box;
}
<div class="bgg-2 bg-video">
<video autoplay="autoplay" muted="muted" playsinline="" loop="loop" poster="/images/2.jpg" class="scroll-video">
<source src="/files/video-test.mp4" type="video/mp4">
</video>
</div>
Why is Edge not displaying it like should be?
Yep, I faced this problem before. Microsoft Edge doesn't understand object-fit: cover on HTML5 video tags.
Good news: The new Chromium-based version of Edge (still on beta) fixes this bug. In the meantime, if you need to give support to this browser you can use this old-school CSS hack.
.bg-video > video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
object-fit has been shipped in Edge 16 but it seems edge bug I think.
Try this:
.bg-video video {
position: absolute;
top: 0;
left: 0;
width: auto; // changed from 100%
height: 100%;
-o-object-fit: cover;
object-fit: cover;
box-sizing: border-box;
}
You could use fitvids.js to your website. its a possible jQuery solution.
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
Related
How can i fit this video on the whole screen?
I have used the below code
<style>
*{
margin: 0px;
padding: 0px;
}
#sky-video{
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
}
</style>
<body>
<video src="videos/Sky.mp4" autoplay muted loop id="sky-video">You brower does not support vidoes</video>
</body>
Here you can see there is a gap in right and left of the video.
Is this because the video size is too small to fit in the whole screen?
You may also want to add: object-fit
#sky-video {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
}
You need to set the width and height for the video container first.
Your container now is then:
body {
display: block;
width: 100%;
height: 100vh;
position: relative;
}
body #sky-video {
width: 100%;
height: auto;
object-fit: cover;
}
I'm trying to make an <object> full screen, with the object-fit: cover; property, but unfortunately in Chrome the result is contain, instead of cover. In Firefox I get the result what I'm looking for. I tried it with <img> tag, and it works, but I can't use an animated svg without <object>.
body {
padding: 0;
margin: 0;
}
.container {
height: calc(80vh - 100px);
position: relative;
overflow: hidden;
}
object {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<object type="image/svg+xml" data="https://svgur.com/i/asr.svg" />
</div>
How can I get the same result in Chrome?
I try to put a video on my website. It should always cover the whole screen. Its no problem if the video gets cut on the sides or the bottom. The most important part of the video is in the top middle.
I've already found a code that works pretty well if you want that the video's center is always visible. But I want the top (and middle) to be visible.
Here is my current code.
.vidwrap {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
height: auto;
width: auto;
display: block;
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
And in this code the top stays visible but its not aligned in the center anymore:
.vidwrap {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: blue;
}
video {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
I am not able to bring these codes together. Can you help me?
Try this:
.vidwrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #00f;
}
video {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
</video>
</div>
For everyone who is looking for the answer. My code seems to work perfectly now (at least it does what I want it to do :D)
This is my code now after nidhi's help
.vidwrap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
Thank you!
Hello I have a div with a <video> tag in it, and this is set as the background of the div. I have it working but when I go on to create a div below that, the video extends into that div. Basically the video extends beyond its parent container into other divs. It looks like it is taking the full height of the site instead of the full height of the div.
Here is my code:
.banner {
height: 903px;
width: 100%;
}
.banner video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video autoplay="" loop="">
<source src="//myvid.mp4" type="video/mp4">
<source src="//myvid.ogg" type="video/ogg">
</video>
</div>
Does anyone know why it is doing this?
Thanks!
change position:fixed to absolute and let the parent container be position:relative
check this snippet
.banner {
height: 200px;
width: 100%;
border: 1px solid green;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div>
whkjshfdksjhdfksdf
</div>
Hope it helps
You have position: fixed change that to absolute. Since fixed takes the current Display scope seperated from the parent elements. Thus scrolls and takes up everything since you used widht: 100%; height: 100%;
You might also add position: relative; to the banner class so the video has it as a parent.
In addition to changes to defaults, there are changes to position of .banner (relative) and the video (absolute), and the height of the video has been modified to a percentage that maintains a 16:9 aspect ratio. To demonstrate that it covers only it's container(.banner), .banner is set at half the lengths of viewport. Please review the Snippet in Full page mode.
SNIPPET
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.428 Verdana;
color: #eee;
overflow-x: hidden;
overflow-y: auto;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.banner {
position: relative;
height: 28vh;
width: 50vw;
}
.banner video {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
min-width: 100%;
min-height: 56.25%;
width: auto;
height: auto;
z-index: 0;
/*background: url() no-repeat;*/
background-size: cover;
}
<div class="banner">
<video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
</video>
</div>
I need to run a video in the background. Requirements are that the video will have to run on 100% width and 600px height/max-height. Here is what i tried to do.
https://jsfiddle.net/yydkd5t4/1/
HTML
<video autoplay loop muted id="video-bg">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
CSS
#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}
The issue what i am facing is that when i try to fix the height it also scale down the width. Any solution to my problem will highly be appreciated.
After understanding what you are trying to achieve...
You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
z-index: -100;
}
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<div class="video-container">
<video autoplay loop muted id="video-bg">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
</video>
</div>
The problem with your current code or any answers till now is that it won't maintain the height: 600px because the video will always maintain his aspect-ratio.
So, you add a parent div with width: 100% and a max-height:600px with overflow:hidden. This way if the video gets a bigger height it will be hidden by the parent div.
This is probably the best way to achieve what you want, but keep in mind it will hide some parts of the video.
Here is your updated code at jsfiddle
Please note that I changed min-height: 100%; to min-height: 600px; and added top: 0;
#video-bg {
position: fixed;
top: 0;
right: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 600px;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}