Improving the projection of video by setting videoElement style

[ronikar]

Video element by default saves on its ratio. So, when it is projected on the map, it still save on its ratio, and the projection not always precise. I changed the style of the video element in order to enable the element not to save on the ratio on the video.

I attached example on projection before my commit and after.

[cherniavskii]

I'm wondering if it's suitable for every video 🤔
Maybe it should be configurable?

[ronikar]

It depends on browser, not on video.
you can read more at https://www.w3schools.com/css/css3_object-fit.asp

[IvanSanchez]

I'm looking at the compabitility table at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit , and it seems that IE/Edge cannot use this.

Is there any other solution for IE/Edge?

[IvanSanchez]

hhmm, apparently one can apply scale transformations to video, but it seems a bit like a hack: https://stackoverflow.com/questions/3779771/html-5-video-stretch

[ronikar]

Maybe I am wrong, because I don't use IE, but if I set attribute in style at js file that isn't supported, it's doesn't effect on style and dosen't throw exception. so , browsers that don't support this attribue will not be affected.

I don't want to implement new projection for video with scale transform, beacuse the implemention will complicate the code because there are some edge cases you need to take care.

@IvanSanchez , I have an idea how to improve the projection for IE/Edge. copy the code of videoOverlay and add this function inside:

_reset: function () { var image = this._image, bounds = new L.Bounds( this._map.latLngToLayerPoint(this._bounds.getNorthWest()), this._map.latLngToLayerPoint(this._bounds.getSouthEast())), size = bounds.getSize(); L.DomUtil.setPosition(image, bounds.min); var videoRatio = image.videoHeight / image.videoWidth; var boundRatio = size.y / size.x; image.style.transform = image.style.transform + "scale3d(1," + boundRatio / videoRatio + ", 1)"; image.style.width = size.x + 'px'; image.style.height = 'auto'; }

This solution has one disadvantage. You must to pass initialized videoElement (videoHeight and videoWidth need to be initialized) . In addition, I believe, you need to change the line that sets image.style.transform, and adapt it to your browser.

[IvanSanchez]

Can you please change the name to keepAspectRatio here? Also adding a note about browser compatibility would be good.

[ronikar]

where need i to add a note about browser compatibility?

[IvanSanchez]

In these comments. Something like

// Whether the video will keep its original aspect ratio. Setting it to `false`
// only has effect on browsers which implement the 
// [`object-fit` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)".

[ronikar]

@IvanSanchez @cherniavskii
Will this improvement be added to leaflet version soon?