Html5 Video - Full Screen Aspect Ratio

[sebastianpetrov]

Hi @mariusjopen

Ok, thank you :)

[heberbrandao]

@sebastianpetrov I am also facing the same issue on my website. Did you manage to find a solution for this?

Usually I have videos on 2.35:1 and whenever I set them in fullscreen, they are somehow cropped. I lose most of the details on both left and right sides.

[mariusjopen]

Dear @heberbrandao
can you show us a link?

Best!

Marius

[sebastianpetrov]

@heberbrandao No, I did a bit of research as Marius suggested, but I couldn't really figure it out. Would be awesome if this was built into an update of lay theme!

[heberbrandao]

@mariusjopen, here is an example of the website I am building:
http://andreszardenings.com/nahe-shortfilm/.

In this page the video, is shown with an aspect ratio of 2.35:1, as I said before.

But when I make it fullscreen, somehow the code cuts the right and left sides and we miss most of the details.
I've been trying to fix it for a week now, but no luck with that.

[mariusjopen]

Dear @sebastianpetrov

ok, I can see what you mean.

Try to add this into your CUSTOM CSS code:

.html5video video {
    object-fit: contain;
}

Berst!

Marius

[sebastianpetrov]

@mariusjopen said in Html5 Video - Full Screen Aspect Ratio:

.html5video video {
object-fit: contain;
}

That did it for me! Thank you :)

[mariusjopen]

Dear @sebastianpetrov
Ah great! Happy to hear!

Marius

[heberbrandao]

@mariusjopen said in Html5 Video - Full Screen Aspect Ratio:

.html5video video {
object-fit: contain;
}

Also worked magically for me!
Thanks!

[mariusjopen]

Perfect! Happy to hear!