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 ,

Leave a Comment

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