Kevin Powell - Community•2y ago

How do I keep the width of the video the same while changing the height in smaller screens?

I tried the following code and at first it was ok when the text is in the center of the video which is what I want. However as the screen gets smaller the text isn't going to the center no more.

header {
    position: relative;
    height: 1000px;

    overflow: hidden;
}

.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-size: 10rem;
    color: var(--c-main);
    -webkit-text-stroke: 2px transparent;

    transition: 200ms ease-in-out;
}

.header-title:hover {
    color: transparent;

    -webkit-text-stroke: 2px var(--c-main);
}

.header-back-video {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: auto;
    
    z-index: -1;
}

header {
    position: relative;
    height: 1000px;

    overflow: hidden;
}

.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-size: 10rem;
    color: var(--c-main);
    -webkit-text-stroke: 2px transparent;

    transition: 200ms ease-in-out;
}

.header-title:hover {
    color: transparent;

    -webkit-text-stroke: 2px var(--c-main);
}

.header-back-video {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: auto;
    
    z-index: -1;
}

2 Replies

Kevin Powell•2y ago

The text is still in the center, the issue is the video is keeping it's regular aspect ratio, so it's leaving the bottom empty. If you don't mind the video being cropped, then

.header-back-video {
  position: absolute;
  top: 0;
  left: 0;
    
  width: 100%;
  height: 100%;
  object-fit: cover;
    
  z-index: -1;
}

.header-back-video {
  position: absolute;
  top: 0;
  left: 0;
    
  width: 100%;
  height: 100%;
  object-fit: cover;
    
  z-index: -1;
}

If you don't want the video to crop at all, you won't be able to use a fixed height.

kingtigerknight•2y ago

Ahhhh object-fit: cover; I didn't know that you can use it without a background in the css. Thanks it worked perfectly 🙂 Also good to meet ya, love your videos.

Gaming

Programming

How do I keep the width of the video the same while changing the height in smaller screens?