Creating a Pop-Out Video Player in Elementor

Embedding a video on your website can be an excellent way to tell your story. Unfortunately, technical limitations mean that using video in this way can cause substantial page speed issues, harming your website’s usability and SEO performance.

Enter the Video Player (with Lightbox)

Elementor’s Video widget is pretty feature-rich, and featured Lightbox (the software that allows you to pop out videos and images in full screen) by default. Unfortunately, using a pop-out play button is a little fiddly – so let’s tackle that today.

First up, we’ll drag a video widget onto the page and add our video link or file. In the Image Overlay tab, we’ll add an overlay (the play button image) and tick the “Lightbox” button.

The play button styling

Here’s how this looks for me:

The Elementor video widget looks terrible by default.

Hmm. Ok, this widget was not designed to be used this way. We’re faced with no options to edit the size of this, and there’s a play button on top of our play button. Let’s switch off the play button for now. We can also head over to the Advanced tab in Elementor, and under Position, we can change the Width to Inline. This will set the widget to the size of our overlay image at 100% of its width. You could further customise this using the Custom width option.

The problem we have now is that the overlay is completely static – it has no hover or active state, so it’s no fun to interact with.

Add some CSS

I’d like to see a change of colour and size on hover. The sizing is easy:

selector {
transition: transform 0.3s ease;
}

selector:hover {
transform: scale(1.1);
}

This is scaling the whole widget up on hover, and applying a simple transition to it.

The colour is a little more complicated, because the image is not being applied in CSS, but semantically using HTML. This means that the image cannot be changed using CSS either (unless you were to create a pseudo element over the top of the image and fade that in on hover). Fortunately, in this case, we only really want the image to go black on hover, so we can use something simple like a brightness filter:

selector {
transition: transform 0.3s ease,filter 0.3s ease;
}

selector:hover {
filter: brightness(0);

}

This gives us the simple play button we wanted, with a nice hover state to make it more fun to interact with!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email
Ben Wilde

Ben Wilde

Scroll to Top