how to make a video angled - html

Question

I try to put a video into my website and. I want the video to be slanted.
I want that the video fill the white div. I don't know how to do that. Can someone please help me out?
.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

I've re-structured your html to make it easier to understand.
Main Idea & Explanation:
The main idea is to have 1 container div that holds all the divs. This will act as the parent div.
Then to have 3 child divs inside the parent div.
2 of the child divs will be for the left section. 1 will be for the right section.
One of the left child div will be for when it we use skew on it. The other left div is to cover up the gap. We also use overflow: hidden to hide the slanted part which is sticking out of the parent container.
The right div is pretty easy, its just to hold the video.
Try this:
.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>
Edit:
Added overflow: hidden to hide the extended video.

Answer 2

Here's sample you can skew video to tile within a particular fragment. You need to do adjustments to ensure appropriate tiling acrroding to skew angle.
Hope this help!
Excuse using simplified layout instead or your original css; also don't forget to checkout 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