How to crop video to fit block size?

E

evcalist2018-04-13 19:49:28

css

evcalist, 2018-04-13 19:49:28

There is a code in which a video immediately goes after the header:

spoiler

<body>

  <!-- Custom HTML -->
<div class="wrapp">
  <div class="container-fluid">
  
    <header>
      
        <div class="row">
          <div class="col">
            <div class="left-info">
              
            </div>
          </div>
          <div class="col">
            <div class="logo">
              <img class="" src="img/logo.png" alt="" style="width: 20%;"></div>
          </div>
          <div class="col">
            <div class="right-info">
              +79808562544 <br> <button type="button" class="btn btn-primary btn-head">Заказать звонок</button>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
      <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>	
    </header>
    
    
    <div class="container-fluid">
      <div class="row">
          <div class="video-container">
            <video autoplay loop muted class="bgvideo" id="bgvideo">
              <!-- <source src="video/Movie.mp4" type="video/mp4"></source> -->
            </video>
        </div>
      </div>
    </div>
</div>		
    
    
    <section class="advantages">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <div class="shadow-block cards">
              <div class="card-icon img-wrap"><img src="img/three.svg" alt="Sales" style="width: 15%;"></div>
              <h4>SEO</h4>
              <p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
            </div>	
          </div>
          <div class="col-md-6">
              <div class="shadow-block cards">
              <div class="card-icon img-wrap"><img src="img/rocket.svg" alt="Sales" style="width: 19.6%;"></div>
              <h4>Контекстная реклама</h4>
              <p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
            </div>
          </div>
          <div class="col-md-12">
              <div class="shadow-block cards">
              <h4>Обучение</h4>
              <p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
              </div>
          </div>
          <div class="col-md-12">
              <div class="shadow-block cards">
              <h4>Партнерская программа</h4>
              <p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
              </div>
          </div>
        </div>
</div>

The wrapp block is set to:
height: 100vh
background-size: cover
The block adjusts to the size of the browser window, but the video continues to cover the rest of the layout

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

Odisseya, 2018-04-14
@Odisseya

Try to ask the video block .video-container { overflow: hidden; }, but this is a crutch.