Create a Video Playlist Popup [Advanced]

 

In this Tips & Tricks tutorial, we’re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to:

✓ Add a template shortcode inside of a widget

✓ Add custom CSS

✓ Create and link to a popup ✓ And much more!

Custom CSS used in the tutorial:

/* Adds a border to the image box */

selector img { border: 2px solid white; }

/* Sets the height of the column and allows an infinite scroll */

selector { height: 80vh; overflow-y: scroll; }

/* Allows the video playlist widget video to be displayed on top */

.elementor-widget-video-playlist .e-tabs-main-area { flex-direction: column-reverse; }

/* Ensure the video fills the width of the container */

.elementor-widget-video-playlist .e-tabs-wrapper { width: 100%; }

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to Use the Image Widget

  In this tutorial we learn how to insert and style images on websites, using the Image...

How to Use the Image Widget

  In this tutorial we learn how to insert and style images on websites, using the Image...

How to Use the Heading Widget on the Elementor Page Builder

  Headings are important elements on your site. They help visitors and search engines scan...

How to Use the Heading Widget on the Elementor Page Builder

  Headings are important elements on your site. They help visitors and search engines scan...

How To Use the Color Sampler

  In this tutorial, you’ll learn how to use the Color Sampler feature in Elementor to find...