Resize a video whilst keeping the controls over the video

[rickpbaker]

When on a 'reels' page and using a MP4 file instead of video, you can't use object-fit:contain without the video player controls appearing 'off' the video. Need to use an 'intrinsic scale' type solution:

https://www.npmjs.com/package/intrinsic-scale

[rsm0128]

@rickpbaker Could you provide me an example, please?

[rickpbaker]

You can see how this here:

https://resinprojects.com/reel/

[rsm0128]

Please try to use height: auto instead of height: 100%

.template-reel .reel-video {
    height: auto;
    width: 100%;
    object-fit: contain;
}

[rickpbaker]

That makes the player controls behave correctly, but it means the video doesn't scale when you reduce the browser height.

[rsm0128]

max-height: 100% will make the video scale when browser height is reduced. Though there will be spaces in left and right.

[rickpbaker]

Yeah it's not the space that's the issue. The issue is the player controls being wider than the video. Doesn't look nice.

[drewbaker]

I have an idea about how we could do this using something like this: https://www.npmjs.com/package/intrinsic-scale and we put a data attribute on an element that will resize it to fit it's parent.

We should think about the syntax for this, and how other things like it. For example "when in view" (intersection observes) etc...

<div>
    <video data-fit-to-parent/>
</div>

Maybe a better name for it...

[rsm0128]

@rickpbaker Please check and try below CSS code.

.template-reel .video-wrapper {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.template-reel .reel-video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    height: auto;
    width: auto;
}

[drewbaker]

I'll take this one, I know what needs to be done. I think the solution will live in the theme with the other JS libs.