Html5 Video - Full Screen Aspect Ratio
-
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