I am trying to get a video to scale with the browser window, and still cover the whole area, but cannot achieve this. Any one know why my current method isn't working?
HTML:
<div class="bgVideoWrap">
<video id="bgVideo" loop="true" autoplay="true" >
<source src="video/bgVideos/Speak_BG.webm" type="video/webm"></source>
</video>
</div>
CSS:
#bgVideo {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
.bgVideoWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff0000;
z-index: -1000;
overflow: hidden;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1;
}
-DEMO-
Set background-size: cover; to .bgVideoWrapand opacity: 0.6; to #bgVideo
MARKUP:
<div class=bgVideoWrap>
<video id=bgVideo loop autoplay poster=http://media.w3.org/2010/05/bunny/poster.png>
<source src=http://media.w3.org/2010/05/bunny/movie.mp4 type=video/mp4>
<source src=http://media.w3.org/2010/05/sintel/trailer.ogv type=video/ogg>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
STYLE:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1;
}
#bgVideo {
height: auto;
width: auto;
opacity: 0.6; /*Set opacity*/
min-width: 100%;
min-height: 100%;
}
.bgVideoWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1000;
overflow: hidden;
background: #333 url("http://aimg.disneystore.com/content/ds/skyway/2012/category/full/cp_FWB_Brave_20120926.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
i want to use z-index for text and overlay.
https://jsfiddle.net/osm2rkbx/1/
it is my code.
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainArea p {
display: flex;
height: 50vh;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px 4px #000000;
z-index: 999999 !important;
}
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
<div class="mainArea">
<div class="container">
<div class="col-md-12 text-center ">
<p>its the text..</p>
</div>
</div>
<div class="mainAreaOverlay"></div>
</div>
when i use z-index for text, its not working. It seems pale. How can i see text with white. İf you help me i will be glad, thanks.
Put z-index:-1 in mainArea class and update z-index:-1 to mainAreaOverlay class.
Old mainArea class:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Updated:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1;
}
Old mainAreaOverlay class:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
Updated:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: -1;
}
I am working on a website hobbinternational.com, and I need the video in the home page to cover the whole screen and the header to be transparent. I tried a lot but couldnt find a solution. Can anyone help?
Add position: fixed; into .page-header
For others, here is an example of a video in the background
.bg-video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
min-width: 100%;
min-height: 100vh;
z-index: 1;
}
.overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
background-size: 3px 3px;
z-index: 2;
}
h1 {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 3;
max-width: 400px;
width: 100%;
height: 50px;
}
<div class="bg-video-wrap">
<video src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4" loop muted autoplay>
</video>
<div class="overlay">
</div>
<h1>Fullscreen video background
</h1>
</div>
https://codepen.io/designsupply/pen/zmEWBm
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
Good morning,
I have a problem with scrolling my website on mobiles. I have set div height to 100%, but on mobile, it has height 'auto'. But still, when text is longer than the screen height, I am unable to read it. How should I edit it please? Thank you!
HTML:
<div id="about">
<div id="onas">
<div id="obsah">
<p> text text text....</p>
</div>
</div>
</div>
CSS:
#about {
background:url('images/bg-about.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
min-height: 100%;
width: 100%;
color: white;
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
z-index: 1;
}
#obsah {
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
color: black;
font-size: 21px;
}
#onas {
position: absolute;
font-family: cond;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, .5);
min-height: 40%;
}
#media screen and (max-width: 1024px){
#onas {
position: static;
margin-top: 200px;
padding-top: 15px;
width: 100%;
height: auto;
min-height: 40%;
}
}
Your problem is that you have:
position: fixed;
In your about, you were probably trying to apply it to the background.
Delete that line and it will scroll.
docs
I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
This is much shorter and worked for me.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
#media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.
.bg-video-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-video-wrap > video,
.bg-video-wrap > iframe {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
Late to the party but I wanted to give a 2020 answer. Here's a simple solution that lets you have an HTML video both centered and responsive without being "fixed" positioned. It lets you start with a fullscreen intro and add some text right when you start scrolling. No scrollbars, no annoying things. As simple as that.
https://codepen.io/LuBre/pen/GRJVMqE?editors=1100
CSS
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
font-Family: Arial;
}
.video-container {
display: grid;
justify-items: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
position: absolute;
z-index: 1;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
.video-text {
z-index: 2;
color: #fff;
text-align: center;
}
.video-container h1, .video-container h2 {
margin: 0;
font-size: 3rem;
}
.video-container h2 {
font-size: 1.4rem;
font-weight: normal;
opacity: 0.6;
}
.page-content {
line-height: 1.4rem;
padding: 2rem;
}
HTML
<div class="video-container">
<video autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="video-text">
<h1>Catchy title</h1>
<h2>Everyone loves catchy titles</h2>
</div>
</div>
<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
Use object-fit: cover;
video {
position: absolute;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}
just center it like any other element with position absolute
.video_contain {
position: absolute;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
transform: translate(-50%);
}
This worked for me
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
This did the trick for me, keeping the video centered all the time and not worrying about the actual dimensions of the video
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
So I tested above solutions and couldn't find that one, so here is mine:
video {
position: fixed;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(50%, -50%);
}