Cropped video with negative margins

Cropped video with negative margins

by jonahe

HTML

<h3>
  Change between class "size-desktop"  and "size-mobile"
</h3>
<div class="container size-mobile">
  <div class="video-player">
    <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    <div class="controls">
      test
    </div>
  </div>
</div>

CSS

.container {
  border: 1px solid red;
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 1920px;
  overflow: hidden;
}

.video-player {
  display: flex;
  width: 100vw;
}

.video-player .controls {
  position: absolute;
  bottom: 2px;
  width: 100%;
  height: 20px;
  background: black;
  color: white;
  border: 1px solid green;
}

video {
  border: 2px solid black;
  width: 100vw;
  height: calc(100vw / 1.77777777778);
  max-height: 90vh;
}

.size-mobile video {
  border: 2px dotted red;
  width: 150vw;
  height: calc(150vw / 1.77777777778);
  margin-left: -25vw;
  margin-right: -25vw;
}