Html5 Video - Full Screen Aspect Ratio

[sebastianpetrov]

Hello,

Is it possible for the html5 video player to maintain aspect ratio when going into full screen mode?

Bonus question and of less importance, is it possible to control the appearance of the standard controls? Maybe remove all standard controls but leave a full screen button in the corner?

Bonus Question 2: is it possible to upload a custom graphic for that full screen button?

I understand the bonus questions may need work on the theme, but if there is a way around it, could you point me in the right direction so I can try hack my way through?

[mariusjopen]

Hi @sebastianpetrov

for all the 3 questions I cannot really help.

You can edit with CSS the behavior of HTML5 videos. Even the aspect ratio.
With jQuery you could trigger the fullscreen button.

I think it is not that difficult. I did something similar once. There are pretty good tutorials online to do this.

Sorry I cannot help you further. If you have a more specific problem, when you are working on that solution – I am happy to assist.

Many wishes!

Marius

[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!