Html5 video perspective transform

Question

Would it be possible to set via CSS or jquery video perspective to fit exactly where and how I need it ?

See picture:

I want the video to fit in the red area.

Thanks in advance!

Answer 1

Yes, it is possible. You will need to familiarize yourself with CSS3 transform and perspective properties.

.video-wrapper {
  perspective: 1000px;
}
video {
  transform: rotateY(-30deg);
}

<div class="video-wrapper">
  <video width="400" controls>
    <source src="http://www.w3schools.com/HTML/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/HTML/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

Without going through all of the effort to create a solution, you can use an HTML5 canvas element