Z-Indexed container isn't clickable - html

I've implemented a bootstrap snippet for video header on my website. It consists of 3 layers:
1. Video (z-index: 0)
2. Overlay of the video (z-index: 1)
3. Text and button (z-index:3)
The arrangement of layers work perfectly, with video being in the background, overlay on top of it, and then text and button on all of that. However, the text and button on front layer isn't clickable, so the button is not in function.
header {
position: relative;
background-color: transparent;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #37250F;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 style="font-size:250%; text-align: center; padding-top:170px;">Preplati se na dostavu svježeg voća</h1>
<form action="http://www.opgnjavro.hr/dostava-voca/">
<button class="snip1562">Saznaj više</button>
</form>
</div>
</div>
</div>
</header>

It's been fixed. I was mixing Elementor with WordPress theme and the navigation of WP theme blocked the Elementor HTML code.
Thanks everyone!

Related

Video banner in html (bootstrap page) incorrectly laid out

I am attempting to adapt code from this site: Video Header snippet
This places a video header and it overrides my entire page and content with itself (the video header).
I would like to resize the header so that it has a width of 100% (across the whole page) and a height of x (decided by me) e.g. 200.
I've tried various things to change both the overlay size and the video but nothing has worked.
<h1>My Website</h1>
<p>Website text here</p>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
The whole of the css used is below. Note, this is used in the same style sheet as bootstrap css has been implemented.
header {
position: relative;
background-color: black;
height: 15vh;
min-height: 15rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 40%;
width: auto;
height: 40%;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
As you can see I have adapted the code from its original (see link above). For instance I have changed this value from 100% to 40%. It works in that it changes the overlay size.
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
What I cannot figure out however is how to get the video also part of the overlay and sized correctly AND for the rest of my existing content not to be hidden from view/overwritten.
For some reason, once I add this content, I cannot scroll down through my site.
If I understand your question :) ,
I think setting the height and min-height to 200px for the header fix the issue like :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
see below snippet :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p class="mb-0">
Created by Start Bootstrap
</p>
</div>
</div>
</div>
</section>
Try deleting all the z-index you have in your CSS and then add z-index: -1; on the media query inside the header, like this:
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
z-index: -1;
}
header video {
display: none;
}
}

Video background not resizing to full height of window

I am having two problems with the implementation of my video background:
1) My video background won't take the full height of the screen when it is resized. What would be the best way of fixing it.
2) I cannot click on the "Return to Website" button.
How can I fix it?
HTML
<div>
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="top-text">
<h3 class="wow fadeIn" data-wow-delay="1s" data-wow-duration="2s" style="font-size: 5em">
Lifestyle
</h3>
<div class="gold-line wow fadeIn" data-wow-delay="1.25s" data-wow-duration="2s" style="margin-top: 25px; margin-bottom: 25px;"></div>
<h5 class="wow fadeIn" data-wow-delay="1.5s" data-wow-duration="2s" style="font-family: 'Josefin Slab', sans-serif; letter-spacing: 4px;">COMING SOON</h5>
</div>
<div id="bottom-text">
<div class="row" style="margin-bottom: 2em; font-family: 'Josefin Slab'">
<div class="col-md-4 wow fadeIn" data-wow-delay="2s" data-wow-duration="2s">"The way of the world is meeting people through other people."</div>
<div class="col-md-4 wow fadeIn" data-wow-delay="2.5s" data-wow-duration="2s">"The way we think, we become"</div>
<div class="col-md-4 wow fadeIn" data-wow-delay="3s" data-wow-duration="2s">"Personal development is a journey, not a destination. Enjoy it, nonetheless."</div>
</div>
<div style="width: 100%;">
<a class="contact-button" href="/about" target="_self" style="z-index: 2">RETURN TO WEBSITE</a>
</div>
</div>
</div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#outer {
width: 100%;
display: block;
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#outer #home-top-video:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(to right, rgba(71, 75, 84, 0.7), rgba(71, 75, 84, 0.9));
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
max-width: 1000%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#top-text {
position: absolute;
left: 50%;
top: 8em;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
font-family: 'Early Bird', sans-serif;
width: 300px;
}
#bottom-text {
position: absolute;
left: 50%;
bottom: -12px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
width: 100%;
}
To make the video fit the entire screen, including a resized screen, you can add the following styles to the video element itself:
<video id="video" autoplay loop muted width="100%">
#video{
height: 100%;
width: 100%;
object-fit: cover;
}
Your link is not clickable because it's nested inside the home-top-video element, who's z-index is set to -1. Your page's styles won't change when you simply delete it.
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
max-width: 1000%;
overflow: hidden;
position: absolute; // delete this
z-index: -1; // and delete this
}
Now while this solves both problems, another problem is that the bottom text get mixed up with the top text when you resize the screen vertically. You could solve this with the css grid or flex. But there are so many divs and inline styles that I'm not sure where to start. Except for the two lines mentioned above, there's more css you that you can remove without noticing any changes in style btw.
I hope this helps you a bit further.
Solution_1:
(i). If you would your site video background take the full height of the screen although it is resized or whatever about anything.
just write the following CSS property
#home-top-video video{
display: block; // If cross-browsering performance
width: 100%; // Not needed for your purpose because it's gets from HTML attribute
height: 100%;
object-fit: cover;
}
(ii). Your comment through of Luis Gar
I don't mind if the video loses part of its width as long as its
centered
Then add one more property
object-position: 50% 50%;
Solution_2: For click on the "Return to Website" button.
In your css file, you wrote on the following code
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
max-width: 1000%;
overflow: hidden;
position: absolute; // Remove This
z-index: -1; // Remove This Also
}
For this cause id="home-top-video"(child area) is going down below id="outer"(parent area) so that you can't access the child area content.
So simply remove that on the following code
check This on the following link

Image not repeating properly

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)

Possible to have slanted stacked divs with one having a background image?

Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);

Horizontally center video in Bootstrap

Researched elsewhere, can't find a solution to horizontally center a video in a Bootstrap div / header section while keeping the video vertically aligned with the top. Div / header section is 100% width with two fixed heights at certain viewport breakpoints.
I've tried removing/renaming the <header> tag in case Bootstrap's styles interfere. Tried <center> tags, specifying the video tag as display:inline and many many other attempts.
The video in this example centers at certain breakpoints but otherwise is left-aligned. I'd like it to be centered throughout all viewport widths, and top aligned as well.
Thanks very much!
HTML:
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
CSS :
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
top: 0;
left: 0;
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
HTML
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
</header>
CSS
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
left: 50%;
top: 0;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
Demo Link : https://jsfiddle.net/hellosrini/vwc5hek0/