HTML Assistance needed

Question

just wondering how I can get text infront of this video, see it's for a thing called Squiddinc, I want giant text saying it, Here is what I've done so far

<html>
    <head>
        <title>OFFICIAL SQUIDDINC</title>
    </head>
    <style>

    video{
        min-width:100%;
        min-height:100%;
    }

    </style>
    <body>
<audio autoplay loop>
<source src="./bgmusic.mp3">
</audio>
<video autoplay loop>
<source src="./bg.mp4" type="video/mp4">
</video>

<html>

http://stackoverflow.com/questions/10422105/add-text-above-html5-video - Check this out, i think this is exactly what you looking for — Robin, Apr 08 '15 at 10:54

Gireesh SB · Answer 1 · 2015-04-08T11:17:06.660

Put another element (say div) and set css as position fixed

       <html>
             <head>
            <title>OFFICIAL SQUIDDINC</title>
           <style>
             .overlay{
            width:400px;
            height:auto;
            position:fixed;
            left:10px;
            top:20px;
            opacity:0.7;
            }
                video{
                    min-width:100%;
                    min-height:100%;
                }

                </style>
                </head>                   
          <body>
            <video autoplay loop>
            <source src="./bg.mp4" type="video/mp4">
            </video>        
            <div class="overlay"></div>
        </body>        
       </html>

Robin · Answer 2 · 2015-04-08T12:12:01.757

Check this fiddle, http://jsfiddle.net/robinat130/jppr4thh/1/

<body>
<audio autoplay loop>
<source src="./bgmusic.mp3">
</audio>
<video autoplay loop>
<source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" type="video/mp4">
</video>
    <div class="overlay">
        <h1>Content above your video</h1>         
    </div>
</body>



video{
        min-width:100%;
        min-height:100%;
    position:relative;
    z-index:0;
    }

.overlay {
    position:absolute;
    top:180px;
    left:200px;
    z-index:1;
}
.overlay h1 { color:white; margin:auto; }

HTML Assistance needed

2 Answers2