I try to display the image and on hover, the video will start replacing the image, I used Javascript for the hover functions.
I did this with a “poster” in the video tag, like this: `
<div class="video"> <video id="videotest" poster="images/img.jpg"> <source src="images/bkg.mp4" type="video/mp4"></source> Can't use videos here. </video> </div>
However, I would like the video to be the same size as the image. The video is 1280 * 720, and the image is 677-611. I tried using the clip path to adapt the video, but it does not work, here is my CSS:
.video { text-align:center; margin:0 auto; height:auto; clip-path:inset(0 978px 611px 301px); -webkit-clip-path:inset(0 978px 611px 301px); }
I tried applying this style to .video, #videotest and source, it still didn't work properly.
Can't use clip path with video in HTML5? If so, how can I do this, and if not, how can I make it work?
I will explain myself a little more: I do not want the image to change, keeping the proportions or not, I just wanted to cut, for example, a few pixels left and right, so the image on the poster will be exactly the same size as the video replacing it. The clip path seemed to match what I was looking for, but I can't get it to work.
Thanks.
source share