Elementor Custom Video Lightbox CSS

6 months ago

< 1 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

Share

Add this code on Appearance Customize > Additional CSS :

/* Start of Video Lightbox Settings */

/* Landscape Videos */

@media only screen
	and (max-device-width: 767px) {
.elementor-lightbox .elementor-video-container .elementor-video-landscape {
    width: 100vw !important;
	margin-top: -99px !important;
		}
}

@media only screen
	and (min-device-width: 767px) {
.elementor-lightbox .elementor-video-container .elementor-video-landscape {
    width: 63vw !important;
		}
}


/* Portrait Videos */

@media only screen
	and (max-device-width: 767px) {
.elementor-lightbox .elementor-video-container .elementor-video-portrait {
    height: 70vh !important;
		}
}

@media only screen
	and (min-device-width: 767px) {
.elementor-lightbox .elementor-video-container .elementor-video-portrait {
    height: 90vh !important;
		}
}

/* Lightbox Settings */

div.elementor-video-container.elementor-lightbox-prevent-close {
width: auto !important;		}


/* Blur Effect */

.elementor-lightbox {
	backdrop-filter:blur(5px);
}

/* End of Video Lightbox Settings */

Read more

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Customer Service

Focus Website

Today, September 8

Hi, there 👋

How can I help you?

Start Chat with:

We use cookie to improve your experience on our site. By using our site you consent cookies.