Html5 Video - Full Screen Aspect Ratio
-
wrote on Feb 3, 2018, 1:59 PM last edited by
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?
-
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
-
wrote on Feb 4, 2018, 1:45 PM last edited by
Hi @mariusjopen
Ok, thank you :)
-
wrote on Nov 10, 2018, 2:29 PM last edited by
@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.
-
-
@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.
wrote on Nov 12, 2018, 1:01 PM last edited by@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!
-
wrote on Nov 18, 2018, 11:11 AM last edited by
@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
-
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
wrote on Nov 19, 2018, 8:05 PM last edited by@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
-
wrote on Dec 2, 2018, 1:10 PM last edited by heberbrandao Dec 2, 2018, 8:10 AM
@mariusjopen said in Html5 Video - Full Screen Aspect Ratio:
.html5video video {
object-fit: contain;
}Also worked magically for me!
Thanks! -
Perfect! Happy to hear!
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
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