Transforming a Bootstrap Background Image to a Captivating Video Display

Here is the CSS code snippet that I'm having trouble with:

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, 
  #000000 100%), url("/assets/img/header_flow.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

I want to change the GIF image to an mp4 video, but it only works in Safari browser. It seems to be looking for an IMG attribute somewhere...

Is there a trick to make this work without completely rewriting the website using HTML video tags?

Edit:

I managed to solve it by adding the following code in my HTML:

<header class="masthead">
            <div class="video-bg">
                <video muted autoplay loop source src="/assets/vid/video.webm" type="video/webm"></video> 
            </div>
                <div class="overlay"></div>
                    <div class="container d-flex h-100 align-items-center">
                        <div class="mx-auto text-center">
                            <h1 class="mx-auto my-0 text-uppercase">Title</h1>
                            <h2 class="text-white-50 mx-auto mt-2 mb-5">Subtitle</h2>
                            <a class="btn btn-primary js-scroll-trigger" href="#contactus">Contact</a>
                        </div>
                    </div>
        </header>

However, I believe there should be a way to achieve this in CSS with Bootstrap, as linking background files directly in CSS is more convenient.

Thank you to everyone who has responded, even if the solution provided isn't exactly what I was looking for!

htmlcssvideobackground

Answer №1

It's not possible to use a MP4 file directly as a background tag in CSS. Instead, you need to create a div and include the video using the src attribute.

Here is an example:

HTML:

<video autoplay muted loop src="path/to/video.mp4"></video>

<div class="content">
    <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
</div>

CSS:

video {
    position: fixed /* or absolute, depend on what you want to do */
    right: 0;
    min-width: 100%
    min-height: 100%
}

.content {
    width: 100%;
    /* Add your desired styles for the content here */
}

Link to more information about fullscreen videos with CSS

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

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

Display the scrollbar within a flexitem by utilizing flexbox styling

I am currently setting up my HTML website with Bootstrap flex and I have a specific layout in mind. I want the inner div to have scrollbars while the outer div fills up the rest of the page. Take a look at this example: <div class="d-flex align-items- ...

htmltwitter-bootstrapcssflexbox

Transforming "datetime-local" into java.sql.Timestamp

I am working on a JSP page that has a form containing an input field with type "datetime-local". The data from this form is then passed to a servlet using the following code: String resetTimeString = request.getParameter(RequestParameterName.RESET_TIME); ...

javahtmltimestamp

A simple guide to viewing a sequential list of loaded stylesheets in Google Chrome

I've been trying to figure out the loading order of CSS stylesheets in Google Chrome, but I'm finding it a bit confusing. Despite my attempts to use Dev Tools -> Network tab -> filter for Stylesheets, I keep getting different results each time I ...

htmlcssgoogle-chrome

Transmitting information from JavaScript to PHP server results in receiving a 500 Error

I have been exploring various code examples and techniques to transmit data from my website to the server's database. After evaluating different options, I concluded that making an ajax call to send the data would be the most efficient method. Here i ...

phpjqueryhtmlcssajax

Combining Images Together in JavaScript

In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...

htmlcssimage

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

Replace HTML elements with AJAX and JavaScript

Working with MySQL data in pyramid presents a challenge as I need to dynamically change an HTML if statement based on the results from JS ajax calls. The main page receives data from views.py and passes it to the .mak script. The key views here are the ma ...

javascriptpythonhtmlajax

Varied selection menu feature

Looking to build a new component: The idea is to create something similar to a dropdown list. I aim to incorporate this component into every cell (td) of table rows. The challenge lies in displaying the second div (item list) under the first div, but abov ...

csshtml

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

jquerycssattributes

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...

html.netangulartypescript

Trouble with visibility of Angular controller variables on scope

I recently adjusted my code to align with John Papa's Angular style guide, but encountered an issue where my controller is no longer visible in ng-inspector. If I can successfully display vm.message, I believe I can resolve the remaining issues (thoug ...

javascriptangularjshtmlng-controller

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

javascripthtmlcss

Python script utilizing Selenium is returning an empty string when trying to extract data from

When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...

pythonhtmlseleniumselenium-webdriver

Is the availability of XMLHttpRequest constant?

When using XMLHttpRequest to retrieve data from the server with Javascript, is it necessary to include conditional checks for the specific browser being used? Is the code snippet below considered standard practice when working with XMLHttpRequest? if (w ...

javascripthtmlajaxxmlhttprequest

Tips on concealing the visibility of a table row using PHP

My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...

phphtmlcss

How can I add divs to an HTML page with a Javascript animated background?

I am currently facing an issue with my JavaScript animated background, consisting of just 3 pictures. I am trying to display some Div elements on it with content inside. Here is the code snippet I have right now: In my CSS file, I have defined styles for ...

javascriptcsshtml

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss