I have an HTML video that I want to use as replacement for a background image that would be fullscreen, However currently it overflows and covers the entire page instead of just the constraints of the header.
html:
<header id="masthead" class="site-header" role="banner">
<video autoplay loop poster="<?php bloginfo('stylesheet_directory'); ?>/img/main.jpg" id="bgvid">
<source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.webm" type="video/webm">
<source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.mp4" type="video/mp4">
</video>
</header>
css:
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(img/main.jpg) no-repeat;
background-size: cover;
}
.site-header {
left: 0px;
top:0px;
z-index: 1;
float: none;
width: 100%;
height: 100%;
overflow:hidden;
text-align:center;
padding: 130px 0 141px;
}
Does anyone know what i have to do, to allow it just to fill the size of my header container? There's a few questions on a similar subject but none seem to answer my specific query.
Apply
position:relative
to your .site-header class
Related
I'm working on a website where I have a background video playing, and I want to display a company logo over that background video while it plays. I want that logo to be centered. I'm using HTML and CSS. Right now, my HTML code for that section is:
#reel {
position: absolute;
visibility: hidden;
right: 0;
top: 8px;
min-width: 100%;
min-height: 100%;
}
#overlay {
top: 50%;
}
<!-- BACKGROUND REEL-->
<div>
<video playsinline autoplay muted loop id="reel">
<source src="Media/Reel.mp4" type="video/mp4">
</video>
<img class="overlay" width="40%" src="Media/Transparent.png">
</div>
For whatever reason, I can't quite get it to center. I want the page to be able to shrink and have the logo stay in the center but right now it's not. Does anyone know why?
#wrapper {
position: relative;
display: inline-block;
}
#reel {
width: 100vw;
}
.overlay {
position: absolute;
width: 40%;
left: 30%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="wrapper">
<video playsinline autoplay muted loop id="reel">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<img class="overlay" src="https://www.w3schools.com/images/driveicon_32.png">
</div>
I think this code might help you.
(Please change the "src" attribute in real usage.)
Best regards
I modify some code & content in HTML structure, I use background image for overlay.
.video-wrapper {
position: relative;
height: 100%;
width: auto;
display: table;
}
.video-wrapper video#reel {
position: relative;
visibility: visible;
width: auto;
display: table;
object-fit: cover;
}
.video-wrapper:after {
content: '';
left: 0;
height: 100%;
width: 100%;
top: 0;
position: absolute;
z-index: 999;
opacity: 0.5;
background-image: url('https://cdn.pixabay.com/photo/2016/11/22/21/57/apparel-1850804_960_720.jpg');
}
<!-- BACKGROUND REEL-->
<div class="video-wrapper">
<video id="reel" poster="" playsinline="" autoplay="" muted="" loop="">
<source src="https://assets.mixkit.co/videos/preview/mixkit-woman-modeling-a-short-black-dress-805-large.mp4" type="video/mp4">
<img class="overlay" src="https://cdn.pixabay.com/photo/2016/11/22/21/57/apparel-1850804_960_720.jpg">
</div>
<div id='box'>
<video playsinline autoplay muted loop id="reel">
<source src="Media/Reel.mp4" type="video/mp4">
</video>
<img class="overlay" src="Media/Transparent.png">
</div>
<style>
#box {position:fixed;width:100%;height:100%;}
#reel {position:absolute;width:100%;height:100%;}
.overlay {width:60px;height:40px;top:calc(50% - 20px);left:calc(50% - 30px);position:absolute;}
</style>
I am not able to fit the background video fit the screen for all devices and browsers. Somehow I am success full in doing it on chrome browser. Earlier it was clipping on both the sides of chrome browser. Now I realize that it is fine on chrome but the problem persists on IE edge
I Have already written the code just need a validation from experts or any improvement on it
here is the code pen https://codepen.io/jslearner1/pen/ydrzZz?editors=1100
*{
margin:0;
padding:0;
}
body{
font-size: 62.5%;
box-sizing: border-box;
font-family: 'Lato',sans-serif;
letter-spacing: 0.5px;
line-height: 1.7;
background-color: #fcfcfc;
}
.header{
width: 100%;
height: 100vh;
font-size: 2rem;
color: #fcfcfc;
position: relative;
z-index: 99;
overflow: hidden;
.overlay{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(#000000,0.8);
z-index: 1;
&__text{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.bg_video{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100vh;
object-fit: cover;
}
<body>
<header class="header">
<div class="overlay">
<div class="overlay__text">
<p>Welcome !!!</p>
</div>
</div>
<!-- Video Taken from George Park Code pen -->
<video autoplay muted loop class="bg_video">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/mp4">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/webm">
your browser is not supported
</video>
</header>
</body>
Similar to this issue: IE and Edge fix for object-fit: cover;
Basically object-fit doesn't really work in Edge (despite being supported).
Replace your .bg_video css with this:
.bg_video{
position: absolute;
top:50%;
left:50%;
width: 100%;
height:auto;
transform: translate(-50%, -50%);
}
You can use the object-fit proprety :
.bg_video {
object-fit : cover;
}
I'm trying to make a small image repeat as an overlay across the entire background video, but it just isn't working. I got it to this point and I've tried every multitude things I can think of. Any suggestions?
Code:
.overlay {
position: relative;
z-index: 2;
overflow: hidden;
opacity: 0.7;
background: #000 url(../media/overlay.png) repeat;
}
.content {
position: relative;
top: 30%;
z-index: 3;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div>
<div class="overlay">
<img src="/media/overlay.png" />
</div>
<div class="content">
<h1 class="content__heading"><img src="/media/logo.png" /></h1>
<p class="content__teaser"> tba. </p>
tba.
</div>
<video id="my-video" class="video" muted loop>
<source src="media/bg.mp4" type="video/mp4">
</video></div>
Your overlay isn't big enough to show the repeating background.
try making the overlay full-page:
.overlay {
width: 100%;
height: 100%;
}
You don't need to include the <img> in the HTML, since you already display the image using a CSS background.
See a working example here (Note: I had to make .overlay position: absolute so that the overlay covers the whole height of the page)
I am trying to full width video the following code is a example. I don't want to restrict video by giving it a height as it is responsive, but the content or above positioned over it is pushing down when i view it on small screen e.g. Mobile
How can i make sure the text over the video shows at the same position even when screen is small and the text or panel below it also hide behind or hide/overlap the video.
I want to make the text on video and below be decent and not jumping or hiding. Am i using positions wrong?
.centered{
position: relative;
top:50%;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}
video{
background-size:cover;
width: 100%;
position: absolute;
top:0;
}
Make sure the parent element has position: relative; and contains the video, and the parent adjusts responsively with the video. I do this by getting the aspect ratio of the video and creating padding (56.2%) that creates space for the video's aspect ratio (using the technique from the iframe section here), then put the text in that parent element and use a combination of position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); to center the text over the video.
* {margin:0;padding:0;}
#video {
height: 0;
padding-top: 56.2%;
position: relative;
overflow: hidden;
}
#video video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#video h1 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
color: #fff;
text-shadow: 1px 1px 10px #000;
font-size: 36px;
font-family: sans-serif;
text-align: center;
}
<div id="video">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<h1>We Evolve with our students
</div>
I think this link will help you about centring anything ;)
About positioning text, you can use vh value. Ie.
.text {
position: absolute;
top: 30vh
}
Also, this guy from the top have a good example about absolute positioning ;)
Link about vh
Here is the css for the div with centerred class. Hope this will help you.
change the position to absolute and use the calc function to position the text to center from top
.centered
{
position: absolute;
top: calc(100% - 50%);
text-align : center;
left : 0;
right : 0;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}
I have the following markup:
.jumbotron {
position: relative;
z-index: -101;
overflow: hidden;
height: 500px;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -100;
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>
My question is around the responsiveness of the video background. When I make the viewport smaller the video eventually begins to shrink and the parent div remains longer then it - resulting in an unwanted red background.
How can I ensure the parent div scales with the size of the video? So that when I bring it right down to > 480px the h2 tag will be right below the video.
You can see a a fiddle here
This will work for you :)
.jumbotron {
position: relative;
height: 500px;
overflow: hidden;
}
.jumbotron video {
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;
}
you can change the fixed height to padding-bottom in .jumbotron
.jumbotron {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>
Not sure if I understood. I made the video fill the screen, by changing its height and width to the viewport size. But needs to keep the aspect ratio.
.jumbotron video {
...
height: 100vh;
width: 100vw;
...
}