I am trying to make a video background as airbnb website, but I really can not figure it out how to make it works.
I am not sure is they use jquery or if I am missing something. In firefox looks pretty good but when I open the html in chrome, Internet explorer, Edge and safari the video is not visible.
This is the html and css, I really hope someone can help me.
I want the video will be with the same height, I dont want it to make it responsive, just like in the airbnb, but dont know how! More than a week I am trying to make it work and nothing :(
I want to make something similar to airbnb but not the same, thats why I copy and paste the html and css code.
Any help will be appreciated!
Thanks!
HTML
<div class="hero shift-with-hiw js-hero">
<div class="hero__background">
<video autoplay="autoplay" preload="auto" loop="loop" poster="http://dummyimage.com/320x240/ffffff/fff" class="video-playing" id="home-video">
<source src="https://a0.muscache.com/airbnb/static/P1-background-vid-compressed-2.mp4" type="video/mp4"></source>
<source src="https://a0.muscache.com/airbnb/static/P1-background-vid-compressed-2.webm" type="video/webm"></source> </video>
</div>
<div class="hero__content page-container page-container-full text-center">
<div class="va-container va-container-v va-container-h">
<div class="va-middle">
<div class="raise-30">
<h2 class="text-branding text-jumbo text-contrast hero__heading">Live There</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.hero {
height: 400px;
position: relative;
}
.hero {
height: 600px;
}
.hero__background {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
audio, canvas, video {
display: inline-block;
}
.hero__background video {
height: 100%;
position: absolute;
top: 0;
width: auto;
}
.hero__background video {
height: auto;
width: 100%;
}
.page-container-full::after {
clear: both;
}
.page-container-full::after {
clear: both;
}
.text-center {
text-align: center;
}
.page-container, .page-container-responsive {
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
.page-container-full {
width: auto;
}
.hero__content {
height: 400px;
position: relative;
z-index: 2;
}
.hero__content {
height: 550px;
padding-bottom: 104px;
top: 50px;
}
.va-container-h {
width: 100%;
}
.va-container-v {
height: 100%;
}
.va-container {
display: table;
position: relative;
}
.va-middle {
vertical-align: middle;
}
.va-top, .va-middle, .va-bottom {
display: table-cell;
}
.text-contrast {
color: #fff;
}
.text-branding {
text-transform: uppercase;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
}
Please update your CSS as follows:
.hero {
width: 100%;
height: 600px;
position: relative;
}
.hero__background {
width: 100%;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.hero__background video {
position: relative;
width: auto;
min-width: 100%;
height: auto;
}
Related
I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#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;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
Hey I can't figure out why my divs are overlapping and what i should do...
You can watch the site here: http://hersing.dk/job/
I would like for the div carrying the hr to appear underneed the header-info div
Heres is the code from the site:
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
min-width: 250px;
min-height: 250px;
padding: 4px;
position: absolute;
top: 10%;
right: 5%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: relative;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
...
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
I hope someome can figure this out, cause i'm pretty lost
Both .info-name and .info-picture are absolute positioned and .header-info has no height defined.
You'd rather use relative positioning + float + clear and/or display: inline-block for both .info-* rules and everything will be fine.
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
.....
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
<style>
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
width: 250px;
height: 250px;
padding: 4px;
position: relative;
top: 10%;
left:70%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: absolute;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
</style>
I think this will solve your problem...
In this case, although very impractical, the solution would be to add a line break <br> after the .header-info div.
I repeat, this solution is not the best one by far, and you should, as pointed out in the comments by Paulie_D, change your positioning layout method.
Everything inside the absolutely positioned .container would be better positioned relative. Use css float:left; or float:right; to position elements and clear:both; when you want the next element to start below all floated elements. Use padding on the container and margins on the floated elements for positioning.
Also give .container css class of overflow:auto; to wrap around all elements inside without having to set the height every time.
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/