Horizontally center video in Bootstrap - html

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/

Related

Crop this with HTML or CSS

.FirstBox {
margin-top: 0;
margin-left: 100px;
margin-bottom: 78px;
height: 60px
}
#BgVideo {
position: absolute;
top: 0;
left: -150px;
top: -650px;
z-index: -100;
}
<div class="FirstBox">
<h1 id="h1">Our secrets</h1>
<div id="BgVideo">
<video playsinline autoplay muted loop width="1640px" height="2060px" src="https://www.w3schools.com/tags/movie.mp4"></video>
</div>
</div>
i tried overflow: hidden; in firstbox class and bgvideo too but didnt work.
i wanna video just be in first box.
video height is 964px.
.FirstBox {
height: 160px;
overflow: hidden;
max-width: 100%;
/* make absolute positioning relative to this div */
position: relative;
}
#BgVideo {
/* calculating height based on the 100% of viewport width and the aspect ratio. */
width: 100vw;
height: calc(9 / 16 * 100vw);
/* center video using absolute positioning */
position: absolute;
top: 0;
left: 0;
/* place the video tag under everything inside .FirstBox div */
z-index: -1;
}
<div class="FirstBox">
<h1>Our secrets</h1>
<video id="BgVideo" autoplay muted> <!-- use the video tag properly with a source tag -->
<source src="https://www.w3schools.com/tags/movie.mp4">
</video>
</div>

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;
}
}

Z-Indexed container isn't clickable

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!

Force Vimeo Iframe center fit and full cover a slide in the background

I'm trying to make a video iframe from vimeo fill a slide in the background. I found an answer that works if the video is not in a carrousel, but as soon as I add the rest of the slides the video wont fill the slide.
You can check the codepen here
If you resize the browser you can notice that black bars appear on the sides or on the top. The effect I'm trying to achieve is the one from the image on the first slide, fills the frame cropping the larger side.
I got some slides with text and background images:
<section id="content">
<div class="slide" style="background:url('https://via.placeholder.com/2000x1000?text=Slide_00') no-repeat center center;">
<div class="slide-text">
<h2><span>Lorem</span></h2>
</div>
</div>
<div class="slide">
<div class="slide-text">
<h2><span>Lorem</span></h2>
</div>
<div class="video-background">
<div class="video-foreground">
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/251273391?background=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</section>
CSS:
html,body {
padding:0;
margin:0;
}
* { box-sizing: border-box; }
.video-background {
background: #000;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.slide {
position:relative;
height:100vh;
border-bottom:3px solid black;
}
.slide-text {
position:absolute;
text-align:center;
left:50%;
bottom:50%;
transform:translate(-50%,50%);
}
.next-slide {
position:absolute;
left:50%;
bottom:1%;
}

Responsive Video and Parent container height

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;
...
}