Jump to content

Not fullscreen video background


MARCELO
 Share

Recommended Posts

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

  1. Put the video inside the box.
  2. Set the video's position to absolute.
  3. Set the video's z-index to -1.
  4. Set the box's position to relative.
  5. Set the box's overflow to hidden.
Link to comment
Share on other sites

(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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...