CODEWITHSUNDEEP
htmlcss
methuselah
methuselah

Reputation: 13206

Video background not resizing to full height of window

I am having two problems with the implementation of my video background:

1) My video background won't take the full height of the screen when it is resized. What would be the best way of fixing it.

2) I cannot click on the "Return to Website" button.

How can I fix it?

enter image description here

HTML

<div>
  <div id="outer">
    <div id="home-top-video">
      <video autoplay loop muted width="100%">
        <source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
      </video>
      <div id="top-text">
        <h3 class="wow fadeIn" data-wow-delay="1s" data-wow-duration="2s" style="font-size: 5em">
          Lifestyle
        </h3>
        <div class="gold-line wow fadeIn" data-wow-delay="1.25s" data-wow-duration="2s" style="margin-top: 25px; margin-bottom: 25px;"></div>
        <h5 class="wow fadeIn" data-wow-delay="1.5s" data-wow-duration="2s" style="font-family: 'Josefin Slab', sans-serif; letter-spacing: 4px;">COMING SOON</h5>
      </div>
      <div id="bottom-text">
        <div class="row" style="margin-bottom: 2em; font-family: 'Josefin Slab'">
          <div class="col-md-4 wow fadeIn" data-wow-delay="2s" data-wow-duration="2s">"The way of the world is meeting people through other people."</div>
          <div class="col-md-4 wow fadeIn" data-wow-delay="2.5s" data-wow-duration="2s">"The way we think, we become"</div>
          <div class="col-md-4 wow fadeIn" data-wow-delay="3s" data-wow-duration="2s">"Personal development is a journey, not a destination. Enjoy it, nonetheless."</div>
        </div>
        <div style="width: 100%;">
          <a class="contact-button" href="/about" target="_self" style="z-index: 2">RETURN TO WEBSITE</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#outer {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

#outer #home-top-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(71, 75, 84, 0.7), rgba(71, 75, 84, 0.9));
}

#home-top-video {
  left: 0%;
  top: 0%;
  height: 100vh;
  width: 100%;
  max-width: 1000%;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#top-text {
  position: absolute;
  left: 50%;
  top: 8em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  font-family: 'Early Bird', sans-serif;
  width: 300px;
}

#bottom-text {
  position: absolute;
  left: 50%;
  bottom: -12px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  width: 100%;
}

Upvotes: 0

Views: 1326

Answers (2)

Ashfaqur_Rahman
Ashfaqur_Rahman

Reputation: 158

Solution_1:

(i). If you would your site video background take the full height of the screen although it is resized or whatever about anything.

just write the following CSS property

#home-top-video video{
    display: block; // If cross-browsering performance
    width: 100%;    // Not needed for your purpose because it's gets from HTML attribute
    height: 100%;
    object-fit: cover;
}

(ii). Your comment through of Luis Gar

I don't mind if the video loses part of its width as long as its centered

Then add one more property

object-position: 50% 50%;

Solution_2: For click on the "Return to Website" button.

In your css file, you wrote on the following code

#home-top-video {
  left: 0%;
  top: 0%;
  height: 100vh;
  width: 100%;
  max-width: 1000%;
  overflow: hidden;
  position: absolute;  // Remove This
  z-index: -1;         // Remove This Also
}

For this cause id="home-top-video"(child area) is going down below id="outer"(parent area) so that you can't access the child area content. So simply remove that on the following code

check This on the following link

Upvotes: 2

Vialito
Vialito

Reputation: 523

To make the video fit the entire screen, including a resized screen, you can add the following styles to the video element itself:

<video id="video" autoplay loop muted width="100%">

#video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Your link is not clickable because it's nested inside the home-top-video element, who's z-index is set to -1. Your page's styles won't change when you simply delete it.

    #home-top-video {
      left: 0%;
      top: 0%;
      height: 100vh;
      width: 100%;
      max-width: 1000%;
      overflow: hidden;
      position: absolute;  // delete this
      z-index: -1;         // and delete this
    }

Now while this solves both problems, another problem is that the bottom text get mixed up with the top text when you resize the screen vertically. You could solve this with the css grid or flex. But there are so many divs and inline styles that I'm not sure where to start. Except for the two lines mentioned above, there's more css you that you can remove without noticing any changes in style btw.

I hope this helps you a bit further.

Upvotes: 3

Related Questions