Html5 Video - Full Screen Aspect Ratio
-
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
-
Hi @mariusjopen
Ok, thank you :)
-
@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.
-
-
@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!
-
@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. -
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
-
@mariusjopen said in Html5 Video - Full Screen Aspect Ratio:
.html5video video {
object-fit: contain;
}That did it for me! Thank you :)
-
Dear @sebastianpetrov
Ah great! Happy to hear!Marius
-
@mariusjopen said in Html5 Video - Full Screen Aspect Ratio:
.html5video video {
object-fit: contain;
}Also worked magically for me!
Thanks! -
Perfect! Happy to hear!
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it