I am trying to center an image that has a background video container. I would like for it to be exactly centered vertically and horizontally. At the moment i can only center the image horizontally but having trouble centering it vertically. When i do center the image it does'nt become responsive. Any ideas?
This is how it looks on my header area:
http://imgur.com/a/N6vNg
HTML code:
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume= "0">
<source src="video/backgroundAnime.mp4" type="video/mp4">
<source src="video/backgroundAnime.webm" type="video/webm">
<source src="video/backgroundAnime.ogv" type="video/ogg">
</video>
</div>
<img src="img/albayda.png" class="img-responsive center-block">
</div>
CSS code:
.header-container{
width: 100%;
height: 800px;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video{
position: absolute;
z-index: -1;
width: 100%;
}
.img-responsive{
margin:0 auto;
}
.header-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
That should do it.
Instead of using <img> tag you may use a <div> with centered non-repeating background and then make it fill container with position:absolue;left:0;right:0;top:0;bottom:0 and optional pointer-events:none.
Related
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
I have .mp4 as background of my site. The video is containing some non-moving elements. Let's say a square.
I want to place a div over this square and let it scale with the video if the window resizes.
I am testing, but the main problem is that the aspect ratio of the div is changing when resizing the window.
jsfiddle with example video:
https://jsfiddle.net/xhrub7so/6/
HTML
<div class="wrapper">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
<div class="url_1">
test
</div>
</div>
CSS
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.url_1
{
position: absolute;
margin-top:20%;
margin-left:20%;
width: 50%;
height:30%;
background-color: #cccccc;
display:block;
}
.wrapper{
width:100%;
height:100%;
}
Thanks for the help.
I am trying to attach a video as a background to an article section. The issue is that in small screens it is displayed only in the 1/3 of the article. To implement that I used the article class, a background div as a wrapper and the video element id. Any ideas?
<article class=”myArticle”>
<div class="fullscreen-bag">
<video id="videoBack">
<source src=" " type="video/mp4">
<source src=" " type="video/ogg">
<source src=" " type="video/webm">
</video>
</div>
<div class="container">
//
//
</div>
</article>
//Css
.myArticle {
position: relative;
overflow: hidden;
}
.fullscreen-bag {
overflow: hidden;
position: absolute;
height: auto;
width: auto;
z-index: -100;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
#VideoBack {
position: absolute;
z-index: -100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
i found the solution. I deleted the #VideoBack rules, and i applied the .fullscreen-bag inside the video tag.
I have my video playing in the background but how do I add images over the video? I kind of want it like this image over videoMy video
body, html {
margin: 0;
padding:0;
}
video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
<div class="container" >
<video poster="Sample.jpg" autoplay="true" loop id="video">
<source src="Burning.mp4" type="video/mp4">
<source src="Burning.webm" type="video/webm">
</video>
You can always build HTML structure for the images as shown in the images and use the video as background of it using some video player plugin like (http://vodkabears.github.io/vide/).
body, html {
margin: 0;
padding:0;}
.container{ width: 70%; background: #000; margin: auto; }
.vid{float: left; width: 100%; }
video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
<div class="container" >
<video poster="Sample.jpg" autoplay="true" loop id="video">
<source src="1.mp4" type="video/mp4">
<source src="1.webm" type="video/webm">
</video>
<img src="http://via.placeholder.com/350x150">
</div>
container centered and image placed on top of the video
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>