For some reason, Beaver Builder’s video lightbox opens quite small, even on large screens. I wanted the lightbox to take up most of the screen, so I used the following CSS to make that happen:
.mfp-iframe-holder .mfp-content { max-width: 95%; aspect-ratio: 16/9; height: auto; } @media (min-aspect-ratio: 16/9) { .mfp-iframe-holder .mfp-content { height: 95%; aspect-ratio: 16/9; width: auto; } } .mfp-wrap .mfp-container { padding: 0; } .mfp-wrap .mfp-container * { background: transparent; box-shadow: none; } .mfp-wrap .mfp-content { max-width: 100%; width: 100%; height: 100%; }
…and while I was at it I thew in the following code to improve the look and placement of the lightbox close icon:
.mfp-wrap .mfp-container .mfp-close { color: #ffffff !important; font-size: 36px; opacity: 1; margin-top: 10px; margin-right: 10px; }
Please note: this code is specific to videos with a 16/9 aspect ratio. If you use this with videos with a different aspect ratio, you’ll want to edit the “aspect-ratio” value accordingly.
Been looking for this for a long time, thanks!
You’re welcome!