MARCELO Posted March 1, 2018 Share Posted March 1, 2018 Hello! What part of this html structure i have to change to turn this https://www.w3schools.com/code/tryit.asp?filename=FOX6H0MN95J2 into a not 100% video background. The ideia is to have only the first box with this background. I know i can style other boxes with an specific background color and it will be over the video and hiding it. However that s not what i wanted - my idea is to really have it in the first box and not having to hide anything. By the way, this is a website i guess do exactly that, but with a MUCH MORE complicated structure: https://coverr.co/ Thank you all! Link to comment Share on other sites More sharing options...
Ingolme Posted March 1, 2018 Share Posted March 1, 2018 Put the video inside the box. Set the video's position to absolute. Set the video's z-index to -1. Set the box's position to relative. Set the box's overflow to hidden. Link to comment Share on other sites More sharing options...
MARCELO Posted March 1, 2018 Author Share Posted March 1, 2018 Hi, Ingolme. Here s the result: https://www.w3schools.com/code/tryit.asp?filename=FOXJE1J4PMG0 Something is terribly wrong! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2018 Share Posted March 1, 2018 (1) You have to set the height: html, and body to 100%; (2) Fix your html structure so above can be applied I.E fix missing closing head tag and opening body tag, SO IT WILL WORK. this very basic html layout. (3) set min-height of the first child element to min-width: 100%, this will make this element same height as html and body element, but will increase if content exceeds this min height. Because the parent element is now 100% of viewport area the video will now match this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now