KPC
Kevin Powell - Community•2y ago
kingtigerknight

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
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
kingtigerknightOP•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.

Did you find this page helpful?