CODEWITHSUNDEEP
htmlcssvideobackgroundgrid
James Strecker
James Strecker

Reputation: 1

Video div backgrounds in grid format

I am very new to DIVs in HTML (I am used to using tables due to my 1996 knowledge of coding...) and I am having trouble with something that is probably not very hard but I cannot find a tutorial or help for this specific issue anywhere. If this has already been dealt with before, please direct me to the answer, and I'm sorry for the repeat!

Anyway...I am trying to just make a grid of DIVs, each with its own individual video background. I have the grid laid out in the HTML example (it might be formatted terribly -- again, brand-new at DIVs). I want each "pageWhatever" to have its own video background, but I can't get it to work without everything freaking out and each "pageWhatever"'s video overlapping to the next or spacing things out really weird. I just want to keep this grid and have each section have its own video background. Is this impossible?!

<!DOCTYPE html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<meta name="description" content="Write some words to describe your html page">
</head>

<style>

*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image : url(' bi-background-cubes.png ');
background-attachment : fixed;
background-size : 100% auto;
}
.blended_grid{
display : block;
width : 100%;
overflow : auto;
margin : 0px auto 0 auto;
}
.pageLeftMenu{
background-color : darkgreen;
float : left;
clear : none;
height : 600px;
width : 15%;
}
.pageContent{
background-color : lightgreen;
float : left;
clear : none;
height : 600px;
width : 70%;
}
.pageRightMenu{
background-color : darkgreen;
float : left;
clear : none;
height : 600px;
width : 15%;
}
.pageFooter{
background-color : green;
float : left;
clear : none;
height : 200px;
width : 100%;
}

</style>

<style>

.pageHeader {
  height: 100px;
  border: 0px solid #000;
  border-right:none;
  border-left: none;
  position: relative;
  padding: 0px;
}
#video-container {
    position: absolute;
}
#video-container {
    top:0%;
    left:0%;
    height:100px;
    width:100%;
    overflow: hidden;
}
video {
    position:absolute;
    z-index:0;
}
video.fillWidth {
    width: 100%;
}

</style>

<body>
<div class="blended_grid">
<div class="pageHeader">
</div>
<div class="pageLeftMenu">
</div>
<div class="pageContent">
</div>
<div class="pageRightMenu">
</div>
<div class="pageFooter">
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 1587

Answers (1)

Chun
Chun

Reputation: 2270

To display a looping video as a background you'll need to set
<video preload autoplay loop muted>

  • preload - We don't really need this here beacause the preload attribute is ignored if autoplay is present.

    The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances as mentioned above.
  • autoplay - Autoplays the video. The video will automatically start playing as soon as it can do so without stopping.
  • loop - It specifies that the video will start over again, every time it is finished.
  • muted - It specifies that the audio output of the video should be muted. Assuming that you want to avoid the music/sound of the video to be turned on for a background video

At the end, here's how the whole thing will look like: online example here

<table>
    <tr>
        <td>
            <div class="videoBg">
                <video autoplay loop muted>
                    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/webm; codecs="vp8, vorbis"' />
                        Video not supported.
                 </video>
            </div>
        </td>
        <td>... same here ...</td>
    </tr>
    <tr>
        <td>... same here ...</td>    
        <td>... same here ...</td>
    </tr>     
</table>

And your CSS goes like this:

NOTE: I've created the table with padding just to make it more clean to see, you can either remove it later or style it for your needs

.videoGrid {
    border-spacing: 2px;
    background-color: lightGrey;
    width: 100%; 
    border-collapse: collapse;
    text-align: center;
}
td {
    background-color:orange;
    border: 1px solid gray; /* You can later remove this */
    padding: 6px; /* And remove this */
    width: 47%; /* In order to make this 50% so it fill all the blank spaces and screen */
    display: inline-block;
}

.videoBg {
    overflow: hidden;
}
.videoBg video{
    min-width: 100%;
    min-height: 100%;
}


Using Youtube Videos

If you're looking to use youtube videos instead, just change the CSS for .videoBg video to this: online example here

NOTE: Read more about embedding youtube videos with no sound/music here or just use a youtube video that has no sound already. To avoid the user of clicking on a video to pause/play, you can overlay a div with position absolute to overlay the video.

.videoBg iframe{
    width:100%;
    height:100%;
}

And the embed code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/IJNR2EpS0jw?autoplay=1&controls=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>

Upvotes: 1

Related Questions