Search code examples
jquerycsshtmlvideoperspective

Html5 video perspective transform

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

See picture:

enter image description here

I want the video to fit in the red area.

Thanks in advance!

Solution

  • 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