h1 text obscured by video backdrop

Having trouble with a h1 tag appearing behind my video element. I'm fairly new to programming so please excuse any ignorance on my part.

I attempted to overlay a header on top of a video, but it was unsuccessful. I've also experimented with z-index without success. code | V

<!DOCTYPE html>
<html>
  <head>
    <body>
      <h1 class="skyeHeader">SkyeMrGamez</h1>
    </body>
    <video autoplay muted loop id="landingImage">
      <source src="landingBackground.mp4" type="video/mp4" />
    </video>
    <style>
      .skyeHeader {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #ff0061;
      }

      #landingImage {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        filter: blur(1.5rem);
      }
    </style>
  </head>
</html>
htmlcssvideo

Answer №1

The default z-index value for a video element is higher than that of an h1 element. To address this, consider assigning a higher z-index value to your h1 element.

.skyeHeader {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #ff0061;
        position: relative;
        z-index: 1;
      }

      #landingImage {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        filter: blur(1.5rem);
      }

Answer №2

To enhance the appearance of the "skyeHeader" class, make sure to include both "position: relative;" and "z-index: 9;" in its property.

.skyeHeader { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #ff0061; position: relative; z-index: 9;}

Answer №3

To ensure that z-index functions correctly, the position of your skyeHeader should be set to either absolute or relative. This is likely why you were experiencing issues with z-index.

Alternatively, I recommend adjusting the z-index of the video element to -1. This will allow the video to serve as a background for any content placed on top of it:

#landingImage {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    filter: blur(1.5rem);
    z-index: -1;
}

Additionally, make sure that your video tag is within the body of your webpage. While modern browsers may automatically correct this issue, it is still considered best practice.

<body>
  <h1 class="skyeHeader">SkyeMrGamez</h1>
  <video autoplay muted loop id="landingImage">
    <source src="landingBackground.mp4" type="video/mp4" />
  </video>
</body>

I hope this information proves helpful and wish you success in your learning endeavors!

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

Tips for creating a customized dropdown menu that opens upwards without relying on Bootstrap

Looking for some assistance with creating an animated dropdown menu that slides upwards. Any help is appreciated! $('.need-help').click(function() { $('.need_help_dropdown').slideToggle(); }); .need-help { background:url(../im ...

javascriptjqueryhtmlcss

Ways to stop grabber applications from identifying and saving mp3 files directly from the web browser

I am in the process of creating a music streaming platform that caters to both premium and free users. https://i.sstatic.net/J9gok.jpg As shown in the screenshot above, users with grabber apps installed on their browsers (such as IDM and other download a ...

javascriptphpjqueryhtmlaudio-streaming

Viewing underlined text in iPhone with Bootstrap 5

Recently, I completed a project using Bootstrap version 5.1.3. Upon checking the mobile version on my iPhone XS, I noticed that all anchor tags (<a href="#">Something</a>) have underlined text. To address this issue, I attempted to re ...

htmlcssunderline

Trouble accessing onclick function

My dataSend AJAX function is not being called when I use the onclick event. I have checked in the Inspector of my browser and confirmed that the click handler is attached to it. However, when I set a breakpoint in the function using the Debugger, it never ...

javascriptphphtmlajax

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

Validation of forms in JavaScript, submission only occurs if the data is deemed to be

I am currently working on a JavaScript validation for a Perl form. The validation script is working correctly to display errors when data is missing. However, I am facing an issue where the form still submits after displaying the error messages. I believe ...

javascripthtmlformsfunctionvalidation

Creating an HTML Table for Displaying Multidimensional Array Data

Here is a complex array structure I am working with: $finalData = [ '2017' => [ '2017-02' => [ 'mtd' => 317 ], '2017-01' => [ 'mtd' => 101 ...

phphtmlmultidimensional-array

Use Flexbox hover effect to display submenu text exclusively in the column being hovered

Having an issue with a 5 column flexbox. Each box should display a header text and supplementary text only when hovered over, returning to normal when unhovered. I was able to accomplish this in Codepen (view the rough model here). However, when trying to ...

htmlcssflexboxelementor

What methods can be used to test scss subclasses within an Angular environment?

Exploring different background colors in various environments is a task I want to undertake. The environments include bmw, audi, and vw, with each environment having its own unique background color. Need help writing an Angular test for this? How can I mod ...

cssangulartypescriptunit-testingangular-test

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

htmlcss

Using AngularJS 1 and HTML, creating a modal within a modal or a hidden div that can be shown and hidden in a modal

I already have a modal set up that allows me to add information about "thing1", but I also need to include specific details related to that "thing1" within the same modal. These additional details should appear in the modal when I click on "add more spec ...

javascripthtmlangularjs

Converting XML to HTML with the help of XSLT transformation customization

I need assistance in adjusting the XSLT 1.0 transform within the provided xsl file to create an HTML version of the table coded in the attached XML file. The generated HTML output file should display the table from the XML file with alternating row backgro ...

htmlxmlxslt

Unable to enclose a table within a div element for Chrome web browser

I attempted to keep a table within a div to ensure that the table's width does not go beyond the width of the containing DIV. This table consists of one row with two elements. The second element is fixed in length, while I want the first element to w ...

htmlcssgoogle-chrome

Initiating a web-based compiler directly through a browser using any method possible

Currently, I am developing a web-based educational tool that allows students to view code examples in a browser and edit them directly within the browser. I have been exploring ways to incorporate a client-side compiler so that they can run and debug the c ...

pythonhtmlcompiler-constructioncross-browser

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

I have scoured the forum and came across several older threads that suggest it is not achievable with just CSS (the system I am utilizing does not support scripts). Is there a possibility that this has changed or if someone else has an alternative idea? W ...

htmlcss

What is the method for obtaining a unique id that changes dynamically?

Having trouble accessing the dynamically generated ID in jQuery? It seems to work fine in JavaScript but not in jQuery. Here's an example of the issue: My jQuery code: var img = $("#MAP"+current_img_height); $("#map").css({'height': img.h ...

javascriptjquerycssfrontend

What is the best way to ensure that my input values are saved when I reload the page?

I am trying to create a form where users can enter a name and a mark. The names and marks entered should be stored in an associative array when the submit button is clicked, as long as the mark entered is less than or equal to 100. If a mark greater than ...

phphtmlarrayssessionmultidimensional-array

Validation on the client side will now support the input of comma-separated values

Is there a way to use the jQuery.validator.addClassRules method in order to validate input fields and restrict my textbox to only accept comma-separated values? I also want it to display a default message if incorrect. <input type="text" cla ...

htmljquery

Not considering CSS margins for nested DIVs

I recently acquired a classic bootstrap template that is structured like this: <div class="container"> <div class="row"> <div class="col-12"> ...header... <div class="carouselContainer"> ...carousel... ...

htmlcsstwitter-bootstrapbootstrap-4

How can we save the final composite image created with image layers, Cufon, jQuery,

I'm currently exploring the possibility of a new idea, but I'm not entirely certain if it can be achieved. My progress so far involves loading an image from a URL and using jQuery UI draggable feature to enable users to drag HTML text (which has ...

phpjqueryhtmlimage-manipulationimagemagick