Improving Beaver Builder’s Video Lightbox

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.

Posted in ,

4 responses to “Improving Beaver Builder’s Video Lightbox”

  1. Been looking for this for a long time, thanks!

  2. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *