-
Posts
-
Hi guys,
I would like to open a self-hosted video via a link in the lightbox… so far so good… I put the ending “?iframe=true” at the end of the link and it works…. BUT… the video is created in portrait (9 to 16) format, but is played in landscape format (16 to 9) with a completely black background on the left and right of the video… not what I want…With your enfold video element you can choose the style yourself… i.e. a user-defined aspect ratio…. in my case I chose 9 to 16… and it works great!
This is exactly how I would like to have the video in the lightbox… as fullscreen or 90 % and preferably also as a loop.
Can you please help me with this… I couldn’t find anything here that could help me…Many thanks in advance… see ya
Hey cheffe,
Thank you for the inquiry.
You can use this css code to adjust the size and aspect ratio of the lightbox container.
.page-id-2447 .mfp-wrap { height: 90% !important; top: 20px !important; } .page-id-2447 .mfp-iframe-holder .mfp-content { width: 100%; max-width: 692px; } .page-id-2447 .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 100%; }You can further adjust the values as necessary.
Best regards,
Ismaelmaybe you try this only:
(if you got a real 9/16 video).mfp-iframe-holder .mfp-content { width: 50vh !important; } .mfp-iframe-scaler { padding-top: calc(158% + 80px); }if the video has a width of 50vh – then it has a height of 89vh ( so enough space for close button ). However, with a padding top this means: 89×16/9 = 158
Hi guys…
Many thanks to both of you for the quick feedback 😃
Ismael… unfortunately your code did not work as I had imagined… see screenshot… and everything I tried with the code didn’t get better…. I’m not a professional 🙈
Guenni… your code almost solved my problem 👌🏻 … see screenshot…
It would be a dream if you guys could help me with the final touches…
– black bars to the right and left of the video (perhaps make them transparent or make the format even narrower?)
– video size
– dark video display within the lightbox on the smartphone… for whatever reasonMany thanks in advance… see ya
Here is the link to the screenshots…
https://d-m-d.net/wp-content/uploads/2024/06/videos-lightbox.jpgHi Guenni… the exact size is 608 x 1080 px… aspect ratio should be 9/16.
After looking everything again, I’m very happy with the size of the video (using your code)… desktop, tablet and smartphone 👌🏻… no changes necessary 😃.
Only the black bars on the right and left are annoying…
…and that the video inside the lightbox is displayed so dark on the smartphone… on the desktop and tablet it’s not like that… but maybe I have to create a new topic for that?!…
have a nice weekend….
last attempt – calculation with the given paddings is hard to fullfill – so try on that page without:
(To avoid incorrect values for the normal videos (landscape mode), set these values only for the corresponding page.
(Unfortunately, a custom class is not passed to the main class of mfp-wrap. You could do this for an inline popup.).mfp-iframe-holder { padding: 0px !important; } .mfp-iframe-holder .mfp-content { height: 90vh !important; /*** the wanted height ***/ width: 50.625vh; /*** the calculated width is then ***/ } .mfp-iframe-scaler { padding-top: 178%; /*** 100 x 16 / 9 = 177.88 ***/ }see again: https://webers-testseite.de/portrait-video/
Moin Guenni,
thank you so much for your support 😃… now everything is as I imagined and works like a dream 👌🏻…Hope Kriesi appreciates all your help here and gives you a few bonus points 😉… you’re almost part of the Enfold team somehow
Thanks again and have a relaxing day….
- You must be logged in to reply to this topic.