Resize video help

Resize video help
0.0 0

#1

I want to resize the video when i resize the tab exactly like this website: https://www.taboola.com/
I don’t know how it fail. my webpage: http://airdesign.000webhostapp.com/
can someone help me? Thanks.

screenshot of the website vs mine

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Video</title>
      <link rel="stylesheet" href="style.css">
      <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,700,900" rel="stylesheet">


                  <style type="text/css">
                  
                  * {
                        margin: 0;
                        padding: 0;
                  }
                  body {
                        font-family: Calibri, sans-serif;
                  }
            

            .video-section {
                position: relative;
                min-height: 90vh !important;
                max-height: 90vh !important;
                  height: 90vh !important;
                  display: block;
                overflow: hidden;
            }
            #video-elem {
                  position: absolute;
            }
            video::-webkit-media-controls {
                display:none !important;
            }

            .video-overlay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: rgba(31,35,47,.5);
                background-color: rgba(31, 35, 47, 0.5);
                opacity: 1;
            }
                  
            .video-overlay-inside h1 {
                position: absolute;
                left: 50%;
                top: 37%;
                transform: translateX(-50%) translateY(-50%);
                text-align: center;
                text-shadow: 0 2px 10px rgba(15,54,89,.3) !important;
                font-family: HelveticaNeueLTStd-Bd,sans-serif !important;
                font-size: 36px !important;
                line-height: 1.3 !important;
                color: #fff;
            }

            .video-overlay-inside {
                  height: auto;
                  display: inline-block;
                  position: absolute;
                  top: 50%;
                  transform: translate(50%,-50%);
                  right: 50%;
                  width: 1130px;
                  padding: 180px 215px 180px 215px;
                  text-align: center;
            }
            .content-section {
                  color: #fff;
            }
            </style>
</head>
<body>

<div class="nav-position">
      <nav>
            <span id="brand">
                  <a href="index.html">Brand</a>
            </span>

            <ul id="menu">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">FAQ</a></li>
            </ul>

            <div id="toggle">
                  <div class="span" id="one"></div>
                  <div class="span" id="two"></div>
                  <div class="span" id="three"></div>
            </div>
      </nav>

      <div id="resize">
            <ul id="menu">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">FAQ</a></li>
            </ul>
      </div>
</div>

<div class="video-section">
                  <video id="video-elem" preload="auto" autoplay="true" loop="loop" muted="muted" poster="opa1px.png"> 
                        <source src="hp.mp4" type="video/mp4">
                        Video not supported
                  </video>

      <div class="video-overlay">
            <div class="video-overlay-inside">
                <h1>Drive Quality Traffic From Top Publishers. Get Conversions, and Grow Revenue.</h1>
          </div>
      </div>
</div>


      <div class="content">
            <h1>Smooth Fade-Up Navigation</h1>
      </div>
      <script>

      $("#toggle").click(function() {

      $(this).toggleClass('on');
      $("#resize").toggleClass("active");

      });


      </script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <div class="content-section">
            <h1>Video As A Background For Website Section</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget aliquam massa. Donec feugiat, tortor ac feugiat auctor, purus augue rhoncus neque, at tristique tortor urna at velit. Nullam in maximus quam. Suspendisse aliquam enim nibh, ac scelerisque justo sollicitudin eget. In sed lacinia quam, a viverra diam.</p>
        </div>
</body>
</html>

That just CSS for Navigation

* {
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
}
 
body {
      width: 100%;
      height: 100vh;
      background: url(Hero.jpg) no-repeat 50% 50%;
      background-size: cover;
      display: table;
}

.nav-position {
      position:relative;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;

}
.content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
 
.content h1 {
      color: #fff;
      font-family: "Poppins";
      font-weight: 200;
      font-size: 40px;
}
 
nav {
      width: 100%;
      background: #000;
      height: 70px;
      position:absolute;
      z-index: 1000;
      margin-top: 0px;
}
 
nav #brand {
      float: left;
      display: block;
      margin-left: 84px;
      font-size: 30px;
      line-height: 70px;
      font-weight: bold;
}
 
nav #brand a {
      color: #fff;
      transition: all 0.3s ease-out;
      font-family: "Poppins";
      font-weight: 300;
}
 
nav #menu {
      float: right;
      position: relative;
}
 
nav #menu li {
      display: inline-block;
      padding: 0px 30px;
      cursor: pointer;
      line-height: 70px;
      position: relative;
      transition: all 0.3s ease-out;
}
 
nav #menu li a {
      color: #fff;
      font-family: "Poppins";
      font-weight: 200;
}
 
#toggle {
      position: absolute;
      right: 20px;
      top: 14px;
      z-index: 999;
      width: 40px;
      height: 40px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}
 
#toggle .span {
      height: 3px;
      background: #fff;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
}
 
#toggle.on #one {
      transform: rotate(45deg) translateX(2px) translateY(4px);
}
 
#toggle.on #two {
      opacity: 0;
}
 
#toggle.on #three {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
 
#resize {
      z-index: 1;
      top: 0px;
      position: absolute;
      background: #000;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
      display: table;
}
 
#resize #menu {
      height: 90px;
      display: table-cell;
      vertical-align: center;
}
 
#resize #menu li {
      display: block;
      text-align: center;
      padding: 20px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}
 
#resize li:nth-child(1) {
      margin-top:140px;
}
 
#resize #menu li a {
      color: #fff;
}
 
#resize.active {
      visibility: visible;
      opacity: 0.99;
}
 
 
@media(max-width: 768px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
      }
 
      nav #brand {
            margin-left: 18px;
      }
 
      #menu a {
            font-family: "Poppins";
            font-weight: 200;
            font-size: 20px;
      }
 
      nav #menu {
            display: none;
      }
}
 
@media(min-width: 768px) {
      #resize {
            visibility: hidden !important;
      }
}

#2

Why didn’t you use <video> instead of <div>? Or <video> in <div>?


#3

I did


<div class="video-section">
                  <video id="video-elem"

#4

Solution

I found on internet

video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

-----topic can be closed


#5

Oh you did. Never mind.