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!
Thanks for sharing this helpful CSS snippet! I’ve had the same issue with the small lightbox size in Beaver Builder and was looking for a simple solution. Your code does a fantastic job of adjusting the lightbox so videos look great on larger screens.
The close icon adjustment is a nice touch too—much cleaner and more user-friendly. Also, I appreciate the note about the aspect ratio; I would’ve missed that detail. I’ll definitely give this a try!
I’m glad you found it helpful!