I would like a full size, background youtube video. I used the following example for html5 video, and it worked.
I would like same, resizable background video, but unfortunately black bar appears on both side.
The solution is for html5 videos are the following snippet:
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: aboslute;
What's the problem with it with youtube videos? What is the best way to get same result?
body {
margin: 0;
padding: 0;
background: #333;
background-attachment: fixed;
background-size: cover;
}
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
article {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
margin: 10px;
}
h1 {
position: absolute;
top: 60%;
width: 100%;
font-size: 36px;
letter-spacing: 3px;
color: #fff;
font-family: Oswald, sans-serif;
text-align: center;
}
<article>
<h1>GROSS DESIGN co.</h1>
</article>
<video autoplay loop id="video-background" muted>
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
You could try another approach with Jquery; It would allow you to have your youtube videos auto-resize based on the browser viewport. Put your content in the DIV and use it as a container.
Original Tutorial
Related
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I want to make the image caption stick to the top of the viewport once a user scrolls the page, but it's not working. I would greatly appreciate the help, here is my HTML and CSS code:
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
</div>
html{
width: 100vw;
}
body{
width: 100%;
margin: auto;
}
h1{
position: absolute;
z-index: 5;
}
#img-div{
position: relative;
height: 778px;
width: 100%;
}
#image{
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption{
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
The problem is that the stickiness position occurs in the given code in relation to the containing element, not in relation to the viewport.
This snippet takes the caption out of that element and then it sticks to the top of the viewport. (Note, to make things scrollable body has been given height 500vh for this demo).
html {
width: 100vw;
}
body {
width: 100%;
margin: auto;
height: 500vh;
}
h1 {
position: absolute;
z-index: 5;
}
#img-div {
position: relative;
height: 778px;
width: 100%;
}
#image {
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption {
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
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
I'm a beginner in Ionic Framework. Recently I have built a page with a swipe-back-button on the left of the navigation bar. This shifts the title a bit to the right: (I have added a red background to the title to illustrate this)
Not using position: absolute:
To center the title, I added the following css code:
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
}
It works:
Using position: absolute:
The problem is that the title now "covers" the swipe-back button, making it impossible to click on the button.
Any solutions? Thank you in advance.
Try to add position:relative and some z-index value to your back button...
I have created a working snippet to illustrate your problem
div {
position: relative;
}
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
box-sizing: border-box;
}
button {
width: 20px;
height: 20px;
background: green;
position: relative;
z-index: 99;
}
<div>
<button></button>
<ion-title>About</ion-title>
</div>
I have an image with a text box overlay in my app.
I'm trying to fiddle with the size of the faded box. It's too tall, but changing the header margin height isn't working to reduce the height.
Can anyone see what needs to be changed to reduce the height of the text box?
Thanks
.module {
background: url(glowcell.jpg);
background-attachment: fixed;
width: 100%;
min-height: 540px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
Hard to tell with just the CSS, can you post more?
My best guess would be this line:
min-height: 540px;
Unless you want the minimum height to be 540px, I would just use height. But like I said, it's almost impossible to give a more accurate answer based on only your CSS.
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;