Clip-path not working on videos

Question

I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions.

I did this using "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 to use clip-path to adapt the video but it doesn't 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 as expected.

Is it impossible to use clip-path with videos in HTML5? If so, how can I do it, and if not, how can I make it work?

I will explain myself a little more: I don't want the image to resize, keeping proportions or not, I just would like to cut off, for example, some pixels left and right, so the image in poster is exactly the same size as the video replacing it. Clip-path seemed to correspond to what I was looking for, but I can't get it to work.

Thanks.

Answer 1

Well Here is the code in HTML you add in the video tag poster="transparent.jpg" to call it by css background and preload="none" to make the poster visible then you make sure to add video's extension that works with the browsers in source tag inside the video tag Unfortunately I couldn't finger out extension that works with safari, It could works if you add the video as one extension to your source folder but I never try

.video {
        background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat;
	background-size:  677px 611px;
	text-align:center;
	margin: 0 auto;
	width: 677px; 
        height:611px;
}

video { 
            width: 677px; 
            height:611px;
            object-fit:inherit;
    	}

    	<div class="video">
    	    <video controls="true" id="videotest" poster="transparent.jpg" preload="none">
    	        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
    		    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
    		    <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
    	    </video>
    	</div>