Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 534
Ionita Cristian-Valentin Avatar asked Mar 13 '23 06:03

Ionita Cristian-Valentin


1 Answers

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

like image 192
Jeff Jenkins Avatar answered Mar 20 '23 05:03

Jeff Jenkins