Menu
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.
648
It’s very weird that clip-path didn’t support the path () function out of the gate, since path () is already a thing for properties like motion-path. Firefox has support for it now though, and we’re waiting for the rest of the browsers. See An Initial Implementation of clip-path: path ();
The clip-path property lets you clip an element to a basic shape or to an SVG source. Note: The clip-path property will replace the deprecated clip property. yes for basic-shape. Read about animatable Try it The numbers in the table specify the first browser version that fully supports the property.
Note: The clip-path property will replace the deprecated clip property. yes for basic-shape. Read about animatable Try it The numbers in the table specify the first browser version that fully supports the property.
I was extremely excited when I first heard that clip-path: path () was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing SVG or a huge list of points inside the polygon function! Chris was excited about the initial implementation, too.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
