Преобразование перспективы видео в html5

Question

Можно ли установить с помощью точки зрения CSS или jquery видео, чтобы точно соответствовать тому, где и как мне это нужно?

См фото:

Я хочу видео, чтобы поместиться в красной зоне.

Заранее благодарен!

Answer 1

Да, это возможно. Вам нужно будет ознакомиться с CSS3 transform и perspective.

.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>

Не вдаваясь через все усилия, чтобы создать решение, вы можете использовать canvas элемент HTML5