CODEWITHSUNDEEP
htmlcss
Titan
Titan

Reputation: 89

Html and Css how to overlay text in the center of a video

In my website I have a page with a section and in this section I have a video as a background.

I have to put some text in the center of this video, but I don't know how to do it.

My code html:

<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <section id="section-1">
            <video autoplay="" muted="" loop="" id="video-background"> 
                <source src=".background-video.mp4" type="video/mp4">
            </video>
        </section>

        <section id="section-2">
            //..
        </section>

        <section id="section-3">
            //...
        </section>
    </body>
</html>

My code CSS:

body
{
    margin: 0px;
    padding: 0px;

    overflow-x: hidden;
}

@media screen and (min-width: 600px) 
{
    #section-1
    {
        margin: auto;
        padding: auto;
    }

    #video-background
    {
        width: 100%;
    }

   //..
}

Upvotes: 0

Views: 2050

Answers (1)

JamalThaBoss
JamalThaBoss

Reputation: 404

Step 1: Make your divs flex and center the contents of them, Step 2: Assign your background videos as absolute and expand them in your div, Step 3: Add your text into your div and voila.

#section-1{
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 250px;
}
#section-1 > #video-background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#section-1 > span{
  color: white;
  z-index: 2;
  text-shadow: 2px 2px black;
  font-size: 24px;
}
<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <section id="section-1">
            <video autoplay="" muted="" loop="" id="video-background"> 
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
            <span>Hello!</span>
        </section>
    </body>
</html>

Upvotes: 1

Related Questions