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>
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;
}
Set a maximum size to the video size ratio
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
max-width: 1024px;
max-height: 576px;
}
.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 1024px;
max-height: 576px;
}
And HTML code
<div class="videoWrapper">
<video class="aspect-ratio-box" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Here the result : https://prnt.sc/s6y3no
The width size is correctly limited to 1024px. The problem is that the height is not limited. It does not allow to put the paragraph below the video.
Why is he ignoring my css rules? How can I overcome this problem
Thanks for helping
I found the solution.
.video {
object-fit: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-frame {
position: relative;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
}
.video-container {
max-width: 1024px;
}
And HTML
<div class="video-container">
<div class="video-frame">
<video class="video" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
I try to put a video into my website and. I want the video to be slanted.
I want that the video fill the white div. I don't know how to do that. Can someone please help me out?
.video {
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
height: 400px;
width: 100%;
background-color: white;
box-shadow: 0 25px 30px rgba(0, 0, 0, .5);
display: flex;
}
.video1 {
height: 100%;
background: #222629;
width: 50%;
box-sizing: border-box;
}
#myVideo {
height: 400px;
width: 100%;
object-fit: cover;
}
.video2 {
width: 50%;
height: 100%;
box-sizing: border-box;
border-left: 100px solid #222629;
border-bottom: 400px solid transparent;
}
<div class="video">
<div class="video1"></div>
<div class="video2">
<video autoplay muted loop id="myVideo">
<source src="<img/background_video.mp4" type="video/mp4">
</video>
</div>
</div>
I've re-structured your html to make it easier to understand.
Main Idea & Explanation:
The main idea is to have 1 container div that holds all the divs. This will act as the parent div.
Then to have 3 child divs inside the parent div.
2 of the child divs will be for the left section. 1 will be for the right section.
One of the left child div will be for when it we use skew on it. The other left div is to cover up the gap. We also use overflow: hidden to hide the slanted part which is sticking out of the parent container.
The right div is pretty easy, its just to hold the video.
Try this:
.video-container {
width: 100%;
position: relative;
}
.left-video-slanted {
background-color: #222629;
width: 50%;
height: 400px;
position: absolute;
left: 120px;
transform: skew(-30deg);
z-index:99;
}
.left-video {
background-color: #222629;
width: 50%;
height: 400px;
position: absolute;
left: 0;
z-index: 99;
}
.right-video {
width: 50%;
height: 400px;
position: absolute;
right: 0;
overflow: hidden;
}
#myVideo {
position: absolute;
right: 0;
height: 400px;
}
<div class="video-container">
<div class="left-video-slanted"></div>
<div class="left-video"></div>
<div class="right-video">
<video autoplay muted loop id="myVideo">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
</div>
Edit:
Added overflow: hidden to hide the extended video.
Here's sample you can skew video to tile within a particular fragment. You need to do adjustments to ensure appropriate tiling acrroding to skew angle.
Hope this help!
Excuse using simplified layout instead or your original css; also don't forget to checkout Browser Compatibility Table.
body {margin: 0;} /* Ignore */
.video {width: 100%; display: table;}
.video1, .video2 {width: 45%; display: table-cell; background: #333;}
.video1 {color: #eee; text-align: center;}
#myVideo {width: 92%; transform: skewX(-15deg);}
<h3>Sample SKEW -15</h3>
<div class="video">
<div class="video1">
Video 1 :)
</div>
<div class="video2">
<video autoplay muted loop id="myVideo">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
</video>
</div>
</div>
NJoy!
-Adesh
New to coding.
I've set a video to autoplay on the background of a website.
When I try to place an image on top, I encounter issues, specifically when attempting to center it horizontally.
The typical solution results in the image disappearing:
img.center {
display: block;
margin: 0 auto;
}
Here is my CSS for the logo:
.logo {
position: absolute;
margin-left: auto;
margin-right: auto;
height: 250px;
padding-top: 15px;
}
I need this logo to float on top of the background video with it styled as such:
#bgvideo {
position: fixed;
top: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
It is simple as this. Here is a working codepen.
HTML:
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#myImg {
position: absolute;
left: 0;
right: 0;
display: block;
margin: auto;
}
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;}