如何使视频成角度

Question

我尝试将视频放到我的网站中。我希望视频倾斜。

我希望视频填充白色div。我不知道该怎么做。有人可以帮我吗？

.video {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  height: 400px;
  width: 100%;
  background-color: white;
  box-shadow: 0 25px 30px rgba(0, 0, 0, .5);
  display: flex;
}

.video1 {
  height: 100%;
  background: #222629;
  width: 50%;
  box-sizing: border-box;
}

#myVideo {
  height: 400px;
  width: 100%;
  object-fit: cover;
}

.video2 {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  border-left: 100px solid #222629;
  border-bottom: 400px solid transparent;
}

<div class="video">
  <div class="video1"></div>
  <div class="video2">
    <video autoplay muted loop id="myVideo">                  
             <source src="<img/background_video.mp4" type="video/mp4"> 
	        </video>
  </div>
</div>

Answer 1

我已经对您的html进行了重组，以使其更易于理解。

主要思想和解释：

主要思想是拥有1个容纳所有div的容器div。这将充当父div。

然后在父div内有3个子div。

子div中的

2个用于左侧部分。 1将用于右侧部分。

当我们在其上使用倾斜时，左子div之一将用于该子div。另一个左面的div是弥补空白。我们还使用overflow: hidden隐藏从父容器伸出的倾斜部分。

正确的div很容易，仅用于保存视频。

尝试一下：

.video-container {
  width: 100%;
  position: relative;
}

.left-video-slanted {
  background-color: #222629;
  width: 50%;
  height: 400px;
  position: absolute;
  left: 120px;
  transform: skew(-30deg);
  z-index:99;
}

.left-video {
  background-color: #222629;
  width: 50%;
  height: 400px;
  position: absolute;
  left: 0;
  z-index: 99;
}

.right-video {
  width: 50%;
  height: 400px;
  position: absolute;
  right: 0;
  overflow: hidden;
}

#myVideo {
  position: absolute;
  right: 0;
  height: 400px;
}

<div class="video-container">

  <div class="left-video-slanted"></div>
  
  <div class="left-video"></div>
  
  <div class="right-video">
    <video autoplay muted loop id="myVideo">
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    </video>
  </div>

</div>

修改：

添加了overflow: hidden以隐藏扩展视频。

Answer 2

在此示例中，您可以倾斜视频以在特定片段内平铺。您需要进行调整以确保适当的平铺倾斜到偏角。

希望获得帮助！

请改用简化版式或您的原始CSS；也不要忘记签出Browser Compatibility Table。

body {margin: 0;} /* Ignore */
.video {width: 100%; display: table;}
.video1, .video2 {width: 45%; display: table-cell; background: #333;}
.video1 {color: #eee; text-align: center;}
#myVideo {width: 92%; transform: skewX(-15deg);}

<h3>Sample SKEW -15</h3>
<div class="video">
  <div class="video1">
    Video 1 :)
  </div>
  <div class="video2">
    <video autoplay muted loop id="myVideo">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
	  </video>
  </div>
</div>

NJoy！ -Adesh