Placing a video as the background of a div element and ensuring the text appears in the

I'm facing a challenge with setting my text background as a video. Despite my efforts, the text remains hidden behind the video and doesn't come to the front. Additionally, I'm encountering an issue where the video background does not adapt responsively on smaller screens, covering the entire screen. It also appears that the video's frame width and height are altered and do not play in their original ratio.

Is there anyone who could assist me in resolving this issue?

Here is the HTML code:

<div class="container-fluid no-left-padding no-right-padding welcome-text video-content">
   <!-- Container -->
   <div class="container">
      <video autoplay muted loop>
         <source src="assets/videos/welcome_video.mp4" type="video/mp4">
      </video>
      <h2>Hello, I want to display this text, and play the video on background.
      </h2>
   </div>
</div>

And here is the corresponding CSS code:

.welcome-text {
    padding-bottom: 180px;
    padding-top: 180px;

}
.video-content{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
video{
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

Answer №1

Consider inserting

<h2>Hello I am interested in displaying this text alongside a video playing in the background.<h2\>
before the <video><video\> tags

I recommend including parameters such as width and height like so: width:auto;height:auto;

Answer №2

To ensure the text appears in front of the video, add a CSS rule z-index: 2.

Learn more about z-index

In order to control the size of the video, specify dimensions for the div.container and adjust the video styles as follows:

 video{
     min-width: 100%;
     min-height: 100%;
     [...]
}

Check out this example on jsfiddle

For further reading, I recommend exploring these resources:

video height

how to change height of the video

Answer №3

Position text in front of the video:

.welcome-text {
    position: relative;
    /* Change to position:absolute if you want it centered */
    z-index: 1;
}

Center text within the container:

.container {
    position: relative;
}

.welcome-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

To ensure the video is responsive while maintaining its aspect ratio, determine the aspect ratio (e.g., 1280 x 720 = 1.78:1). For a perfect fit, set the height to 56% when the width is 100%.

Although a div can't directly be set to a percentage of its parent's width, you can use padding as a workaround:

.container {
    position: relative;
    height: 0;
    padding-bottom: 56%;
    overflow: hidden;
}

video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

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

Arrange multiple elements in a column using the flexbox `justify-content` property

I have a div containing h1 and h2 tags. My objective is to center them both horizontally and vertically using flexbox. However, my current code aligns them diagonally like this: -------------- | | | h1h2 | | | --------- ...

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well. I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue: When I input a long passag ...

What is the best way to eliminate the Iframe scrollbar while ensuring that the entire page loads?

When I add an Iframe inside the contentArea, two scroll bars appear. I am looking for a way to hide the iframe scrollbar without hiding any of the external website's content. I have tried using the scrollbar="no" snippet code, but it didn&ap ...

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

CSS <ul> <li> spacing issue in Internet Explorer 7

My CSS <ul> <li> nested menu is functioning perfectly in IE 8 and Firefox, but in IE7 it is creating a small gap between the elements. Here is my CSS: #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-po ...

What is the best method for adding a table header that spans across the first two columns?

Here is a link that I would like you to look at: jsfiddle.net/hTRQJ/ <table class="table table-bordered table-striped"><thead> <tr> <th colpan=""> Checkin </th> ...

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

Set the text above the image in HTML and center align it

Hey everyone, I'm new to the world of HTML and CSS. Currently, I am working on designing some text above and centering an image. Additionally, I want the text to automatically wrap if the image is too long. Thank you for your help! Below is the code I ...

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

jQuery Ajax Load() causing screen to refresh unintentionally upon clicking

I am currently developing a web application that includes side menus. However, I am facing an issue with the functionality of these menus. Whenever I click on certain options, the entire page refreshes. For example, under my main menu "Planning the Engagem ...

Is it necessary for every single product to have its very own webpage?

As a newcomer to the world of web development, I'm uncertain about the standard practices. Currently, I am working on creating a small e-commerce website with a wide range of products. Is it recommended to give each item its own dedicated page? Furthe ...

Step-by-step guide on replacing a visible div with a new div when a button is clicked

I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements. My goal is to display only one div at a time when a user clicks on one of the links located on the left side. ...

Dealing with a divided image in a separate thread: What you need to know

I am facing a challenge with incorporating a LARGE image into a website, which is affecting performance. My solution is to divide the image into smaller pieces and stitch them together using a grid upon loading. The only issue is that it must be in the ba ...

Hover and focus effects of the main navigation menu in Semantic UI CSS

I seem to be having trouble styling my navbar with semantic-ui. I want to make changes to the color and background-color on hover and when focused. However, no matter what I try, the hover effect just won't work. I was only able to achieve it using jQ ...

Is it possible to transform the Bootstrap5 sidebar, currently positioned above the block content, into a sticky element on

After creating a Django blog using bootstrap5 and following guidance from the python crash-course book, I encountered an issue with my sidebar placement. Despite trying various methods, I struggled to "override" my blocks in order to keep my sidebar fixed ...

Identify the moment when the SPAN element reappears in sight

I have a question that may have been asked before, but I haven't found a satisfactory answer yet. Within my HTML code, I have a SPAN element with an onclick event, like so: <span onclick='loadDiv()'>Text</span> When a user cli ...

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...