Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Expand video 100%?

HI,

If you look at this site, how can I expand the video to be 100% height and width like an image? So no matter the screen size, it will be alwasy 100% both ways, and if i scroll, obeviously i will need be able to see the other content.

How can i achieve it?

2 Answers

Duarte Monteiro
Duarte Monteiro
22,300 Points
Duarte Monteiro
Duarte Monteiro
22,300 Points

If you open inspector and select <video> you will find

max-width: 100%;

overwrite with on your stylesheet

.home__video {
  width: 100%;
}

Obviously, the bigger the width of screen the bigger the height of the video will be. If you want the video to be not bigger than the height of the window you can use:

section.home__intro {
  height: 100vh;

  /*if you then want the video to be centered you can use flexbox*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Keep on coding @du5rte

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

That doesn't work though.

I need the video to behave like this image here, but if there was another section, obeviously it would scroll.

Duarte Monteiro
Duarte Monteiro
22,300 Points
Duarte Monteiro
Duarte Monteiro
22,300 Points

So you want it to behave like img background-size: cover? Taken from this pen

.home__video {
  height: 100vh;
  overflow: hidden; 
}

section.home__intro {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}