Question 43597 in Html Question posted in
Some basic documentation can be found here.

h1 text stuck behind video background – Html

I have a h1 tag stuck behind my video
(I’m new to programming if this sounds like a stupid question)

I tried putting a header over a video and it didn’t work. I’ve tried putting z-index but they don’t seem to work
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>
Tags:

3

Answers


  1. 0

    Please put "position: relative;" and "z-index: 9;" in "skyeHeader" class property.

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

    Login or Signup to reply.
  2. 0

    video element has a higher z-index value by default. To fix this, you can try setting a higher z-index value for 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);
      }
    Login or Signup to reply.
  3. 0

    For z-index to work, your skyeHeader’s position should be either absolute or relative, that’s the reason z-index was not working for you.

    However i suggest you change the z-index of the video to be -1 instead, that way your video will act as a background to the content you put on top:

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

    Also, Your video tag should be within your page’s body, this won’t have a behavior change because modern browsers fix up the DOM automatically, but this is a good practice.

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

    Hope this helps, good luck with the learning!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search