Responsive and perspective video on laptop display

Viewed 14

I would like to make sure that a video I have uploaded appears in a perspective view and fully responsive on the display of the laptop below.

Imagination: https://i.imgur.com/yY1Z4IO.png

Image files to solve it: https://i.imgur.com/PgM52EA.png

Maybe if you need a mask: https://i.imgur.com/5FHcxsD.png

My coded version: https://jsfiddle.net/KovBotond/cgwe8kqs/19/

<div class="container mt-6">
           <div class="row">
             <div class="col d-flex justify-content-center">
                    <img src="https://i.imgur.com/PgM52EA.png" alt="" class="img-fluid" style="width: 1000px;">

                    
                    <div style="z-index: -1; position: absolute; width: 900px; height: 500px; background-color: rgb(88, 88, 88); filter: blur(250px);"></div>
                      <video class="3dvideo img-fluid position-absolute"  style="z-index: -1; width: 1000px; transform: perspective(1800px) translate3d(0px, -100px, 10px) rotateX(-45deg) scale3d(0.9, 0.72, 1);" preload="none" src="videolink" autoplay muted loop></video>
  
             </div>
           </div>
         </div>
0 Answers
Related