How to center a video horizontally using Bootstrap styling

In my search for a solution, I have not been able to find a way to horizontally center a video within a Bootstrap div or header section while also keeping the video vertically aligned with the top. The div or header section has a 100% width with fixed heights at specific viewport breakpoints.

Despite my attempts to remove or rename the <header> tag and using <center> tags, specifying the video tag as display:inline, and various other methods, the video in this example only centers at certain breakpoints and is left-aligned otherwise. I would like the video to be centered consistently across all viewport widths and remain top-aligned.

Thank you in advance for any assistance!

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">
      <a href="#what-i-do" class="btn btn-primary btn-outline-inverse page-scroll text-capitalize">Button text</a>
    </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;
}
}

Answer №1

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">
      <a href="#what-i-do" class="btn btn-primary btn-outline-inverse page-scroll text-capitalize">Button text</a>
    </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/abc123xyz/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receiving a BAD REQUEST error when trying to retrieve the address, resulting in an empty string being returned

views.py: from django.shortcuts import render from geopy.geocoders import Nominatim from django.http import JsonResponse Create your views here. def single_address(request): if request.method == 'POST': #print(request) addres ...

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

I've spent several days debugging the code, but I can't seem to find a solution. I've gone through the AngularJS documentation and numerous Stack Overflow questions related to the error, yet I'm still unable to identify what's caus ...

Combine the bootstrap button and dropdown menu side by side and adjust the width of the dropdown to be

Snippet: <div class="d-grid gap-2 d-md-block mt-1"> <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button> <button class="btn ...

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

Having trouble accessing a website that is embedded within an iframe, and experiencing issues with several ajax post requests not functioning properly within the iframe specifically on Chrome

I am currently dealing with a situation where I have two distinct websites, (constructed with PHP) and (also a PHP site). To integrate them, I have embedded site1 inside site2 using an iframe. <iframe src="https://site1.com" seamless width= ...

Compressed search bar when in mobile mode

My search bar is getting squashed on mobile devices. Any suggestions for fixing this issue? <div id="menu" class="py-4 d-flex justify-content-center"> <div class="row "> <div class="col-sm-auto "> ...

Troubleshooting spacing problems in Angular Material tables

I'm attempting to utilize an Angular Material table in the following way: <div class="flex flex-col pb-4 bg-card rounded-2xl shadow overflow-hidden"> <table mat-table class="" [dataSource]="$candidates ...

Creating a choppy movement when switching between content with jQuery

I am experiencing a choppy effect when trying to toggle the content visibility with a button click. Can someone advise if there are any issues in how I have structured the markup? Also, is there a way to achieve a smoother toggle effect? View Code $(do ...

Scale first, then drag and drop to fix a faulty registration

I'm currently working on a project that involves dragging and dropping the correct items onto a technical drawing, such as a motherboard. The user is presented with pictures of components like CPUs or DDR memory and must drag these items to their corr ...

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

How can I display pure HTML in a Pyramid view?

I am completely new to Pyramid (and relatively inexperienced with web frameworks in general). My goal is to reach a point where I can retrieve raw HTML from a view in order to format data fetched from my mongoDB database. The __init__.py in my Pyramid pr ...

Explore our Enhanced Django Search Page featuring Efficient Query Pagination!

Hello, I recently set up a basic search form and search view to display search results. I now want to incorporate pagination, but I've run into an issue with the URL structure. Currently, my search URL looks like ../search?q=Bla When attempting to ad ...

Display the names of the files and give the user the option to delete them prior to finalizing the form submission

I'm currently developing a webpage where users can upload files and send them along with a message. One issue I've come across is that when attempting to upload a file or send an attachment (single or multiple), the code snippet below is required ...

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Check out this jsfiddle I've been experimenting with. The jsfiddle is designed to rotate an image by 90 degrees in either clockwise or anti-clockwise direction upon button click. However, the rotated image currently appears outside of its parent div. ...

Having trouble with the jQuery each function's functionality

I am creating circular counters for surveys by generating a counter for each answer option. Currently, I am utilizing this "plugin": Issue: The problem lies in the plugin not fetching the text value from the <div> element and failing to draw coun ...

The Bootstrap dropdown menu vanishes once the toggler-icon is clicked

Recently, I copied and pasted a navigation bar from Bootstrap's documentation available at https://getbootstrap.com/docs/4.3/components/navbar/ After integrating this code into my project, everything seemed to work fine except for one issue. When I r ...

Words placed in the middle of the picture

<div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">New Product</span> </div> I require this specific layout to be responsive. Could you please provide instructions on achieving this? ...

Looking for a way to include the current page's HTML code when exporting a CSV file

Here is the HTML code showcasing the Export button: <form method="post" name="download_csv" class="pull-right" enctype="multipart/form-data"> <button type="submit" name="Export" class="btn btn-success" >Export to excel</button> < ...

Creating a dynamic HTML table using Vue 3

My table is not showing the data I'm fetching from my API. Even though I can see the data in my console.log, it's not populating the table. Could there be an issue with how I'm calling the data to display in the table? <template> < ...

Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div: CodePen Example <html> <head> <!-- MULTIPLE SELECT DROPDOWNS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ ...