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!
Hi Alex,
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; it’s a crucial detail that ensures everything scales correctly. I’ll definitely be putting this to use!
Best regards,
Marc Wayne Schechtel