How to perfectly align a button at the center and position it in the forefront?

I'm attempting to place a button in front of my video and center it on the video. I've tried using position-relative to bring it in front and flex to center it vertically and horizontally, but it's not working as expected. The z-index is correct with position-relative, but the button isn't centered. How can I resolve this issue and why is flex not working here? Thank you for your help.

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" 
          allowfullscreen controls></video> 
        <button class="btn btn-primary btn-lg p-2">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>   
    </div>
  </div>
</div>

Here is the CSS code I have used:

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
htmlcssbootstrap-4

Answer №1

You're on the right track! I've made some adjustments by adding a few Bootstrap 4 classes like position-relative to your video and button. Now, simply add the d-flex class to the button and use mx-auto to center align it.

.embed-responsive-16by9::before {
    padding-top: 10px!important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
 <div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="">
        <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
          <video class="position-relative" id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
          <button class="btn btn-primary btn-lg p-2 position-relative mx-auto d-flex">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

solution 2) To center align the button within the video, you can utilize the CSS transform property as shown below

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>

    <body>
     <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="">
            <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
              <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
              <button class="btn btn-primary btn-lg">
            Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
            </div>
          </div>
        </div>
      </div>
      </div>
    </body>

    </html>

Answer №2

A great way to achieve this is by utilizing a pure bootstrap solution.

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div class="row">
              <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" 
          allowfullscreen controls></video> 
      
      </div>
      </div>
  
      <div class="row">
          <button class="mx-auto btn btn-primary btn-lg p-2">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>
    </div>
  </div>
</div>

Separate the video and button into distinct containers and position the items within those containers at the center. By examining the flex styles applied through bootstrap's use of flexbox, you can understand how this layout was achieved.

https://codepen.io/fuzzysid/pen/ExyzjrB

Answer №3

I haven't utilized the btn styles you provided in your code snippet.

Instead, I modified your HTML to the following:

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken" style="position: absolute">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
      </div>
      <div class="w-100 h-100 text-center align-center">
        <button class="btn btn-primary btn-lg p-2" style="position: relative; margin-top: 25%">Watch video</button>
      </div>
    </div>
  </div>
</div>

Answer №4

utilize the transform property in CSS for centering elements

.btn-watch {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* positions element to be 50% from the left */
  top: 50%;
  /* positions element to be 50% from the top */
  transform: translate(-50%, -50%);
  /* centers the element vertically and horizontally */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-12">
    <div class="mx-auto w-90 h-90">
      <div id="videoWrapper" class="embed-responsive embed-responsive-16by9 darken">
        <video id="videoPlayer" src="https://www.youtube.com/watch?v=P-b4SUOfn_4" allowfullscreen controls></video>
        <button class="btn btn-primary btn-lg p-2 btn-watch">
        Watch video<i class="fa fa-caret-right" aria-hidden="true"></i></button>
      </div>
    </div>
  </div>
</div>

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

Creating dynamic animations for your elements with AJAX

How can I apply animation to an element as soon as it appears? I want others with the same properties to remain unaffected. Here is my approach: $.each(data, function(i, obj) { if(obj['Ping'] == "FALSE"){ ...

javascripthtmlajax

Tips for adjusting the size of a background image using zoom

Currently, I am in the process of creating my first website. At this stage, it consists of a background image, an image, and a non-functional password input section. Everything seems to be going well so far. The background image fits perfectly on the scree ...

htmlcsszoomingbackground-image

What is the best way to create a video that adjusts to different screen sizes within

I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why? How could I fix that? Here is the CSS ...

htmlcssresponsive-design

How can I modify the border color of a Material Ui TextField component?

I've been struggling to figure out how to customize the color of the TextField border. I want to change it from the default grey to black. Below is a simplified version of my UpdatePage.js file: const useStyles = makeStyles(() => ({ updatePage ...

cssreactjsmaterial-uibordertextfield

Switch the 360-degree images by clicking a button using Panolen.js

As a beginner in the world of html, css, and javascript, I am trying to create a webpage that displays 360 panorama images. My goal is to have the image change when a button is clicked - for example, clicking on button 1 will display image1, while clicking ...

javascripthtmlbutton

CSS Padding Hover Transition solution for Eliminating Flickering Text issue

Is it possible to achieve this? I'm attempting to animate the padding around a centered text link. When the text link is clicked, the padding changes from 20% to 100%, which works correctly. The text is horizontally and vertically centered using CSS ...

csscss-transitions

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

javascripthtmlangular

Jquery Parallax causing scrolling problems across different browsers

Could you please take a look at the following link in both Chrome and Firefox? I am encountering some unusual issues. Primary Concern The scrolling function works smoothly in Firefox, but it seems to be malfunctioning in Chrome. Secondary Problem Whe ...

jqueryhtmlcss

Encountering issues with the hyperlink tag '<a>' in an HTML document

I've encountered an issue with the code on my HTML page: <body> <div align="center"> <a href="../index.html"> <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"> &l ...

javascriptjqueryhtml

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...

htmlangular

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

javascriptjqueryhtml

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas

Unable to produce scrolling animation using JavaScript

I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML ...

javascripthtmlcss

Refresh Form (Reactive Forms)

This is the HTML code snippet: <div class="container"> <ng-template [ngIf]="userIsAuthenticated"> <form [formGroup]='form' name="test"> <div class="form-group"> <input type="text" class="form-contr ...

javascripthtmlangular

The mysterious case of the vanishing jQuery traversal box

I'm currently navigating using previous and next buttons, but it seems to be malfunctioning if I click too quickly. My goal is for the navigation to remain smooth without breaking. var $currDiv = $("#start"); $("div").hide(); $currDiv.c ...

jqueryhtmlcss

What is the process for calling a class in HTML from a <Div> tag?

I am struggling with the following code snippet: <p class=‘majed’ style="color:#FF0000";>Red paragraph text</p> How can I reference the 'majed' class above? <Div class=‘majed’ > </Div> Your help is greatly appr ...

html

"Centered in the middle of the screen, an animated

Encountering an issue with this code on Chrome. Clicking on the checkbox causes the text/checkbox to shift in position/padding/margin unexpectedly.. :( View the code on JSFiddle HTML <input id="inp" type="checkbox" /> <div id="cb" class="inp_ch ...

javascriptjqueryhtmlcss

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page

As Bootstrap 4 no longer supports .affix, I had to look for an alternative solution to keep a box fixed. I needed a div container to remain fixed as you scroll to it. My current workaround is using: .fixedcard{ position: sticky; top:75%; } However, th ...

javascriptjqueryhtmlcsstwitter-bootstrap