Hello,
How do we create a CSS DIV or Table field where the entire screen background of a certain section of a Web page, is showing a Video like play? Not the entire page, but like 50% of the top of the page showing a Video like as the background.
For example check out this Site:
Thanks,
Dean
Have you examined the source code of that page?
They have a <div> with a placeholder background image, then a <video> nested inside that.
Hey Sam,
So I checked out that page and set up a temp page for Video as background on our server.
But how do I get the Video to just play in the Background of the Video?
As you can see here:
https://www.anoox.com/temp/video_back.php
That is how do I have the Video play only as the background of div id=“videoloader”
repeat this Video should play as the background video for that DIV “videoloader” so that we can put other elements all over that “videoloader” DIV.
and also of course not go onto DIV1 or DIV2 as you can see in that sample page.
ThanX,
The video overlaps div2 because you set the container at 200px, so div2 comes after that 200px, but the content of the undersize container is overflowing.
You need to stop giving px values to everything. For the most part, height should be defined by the content.
If you want some content on top of the video, you will need another container inside videoloader which is places absolutely.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
#div1, #div2 {
font-size: 2em;
text-align: center;
}
#videoloader {
background: #600;
position: relative;
}
video {
width: 100%;
height: auto;
}
.onvid {
position: absolute;
top: 0;
color: #fff;
}
</style>
</head>
<body>
<div id="div1">Hello World -I am DIV 1, above the video</div>
<div id="videoloader">
<video id="myvideo" autoplay="autoplay" loop="loop">
<source src="/images/video/playing_music.ogv" type='video/ogg'>
</video>
<div class="onvid">
<p>Some Content on the video frame.</p>
</div>
</div>
<div id="div2">Hello World -I am DIV 2, below the video</div>
</body>
</html>
Other things to note about your code, the <center> tag is no longer valid, use css text-align:center; instead. Also there is a stray <p> tag in there.
Hi Sam,
I have added your Code to play around with it.
You can see it via the same test page, here:
https://www.anoox.com/temp/video_back.php
Questions:
1- How do I control the height of the Video area?
2- Why is the DIV below the Video DIV not showing?
Much Thanks,
Dean
You don’t, I set the height of the video to auto, so it always maintains the correct aspect at any size, so height reduces as the width does.
Because you ignored this advice…
…and set a fixed 400px height to its container.
Stop setting heights!
Still dont see what I need to do for DIV2 to show!
Thanks
Remove height:400px; from #videoloader. That’s why I keep saying to stop setting heights.
The other way would be to set overflow:hidden; on #videoloader, that will keep the 400px height and crop the bottom off the video. But I would advise against that. Fixed heights are not a good idea, especially on a site like this which is full (100%) width. But if you do prefer that, a compromise would be to change height:400px; to max-height:400px; along with overflow:hidden;
Ok, so that correction has been made.
So with Video as the Background, one really cannot set the Height of the Video, as one can with an Image, but one has to go with the Height of the Video as it exists in the Video itself. Correct?
Video and images work the same way, they have an aspect ratio, which has to be maintained if the whole picture is to be seen and not distorted.
Because the site fills the full width of the browser, the width of the video varies depending on the screen size or browser window size. If the width changes, the height must also change to maintain the correct aspect. That is why fixed heights don’t work. If you do fix the height, the video or picture will have to either crop or squash.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.