How to Add a Sticky Video in WordPress with Essential Addons

Sometimes, when writing an article on your WordPress site, you want to add a video as supporting material to insist on what you want to convey. The problem is, if you place the video in the middle of the article or even in the beginning section, it will be invisible as your readers scroll down the page to read on your article. To fix this issue, you can add a sticky effect to the video. By doing so, your video will be pinned to a certain position (usually to the top) to keep it visible as your readers continue reading your lengthy article. Sticky elements on WordPress sites have been around for quite some time and it’s fairly simple to make a sticky menu, sticky header, video widget, or basically any other element of your site. Furthermore, there are a few tools ideal for doing the job, with WP Sticky being one of the most simple and efficient ones.

How to embed a video in WordPress and make it sticky? You can do so using Essential Addons.

Essential Addons is a freemium Elementor add-on developed by WPDeveloper. This add-on has a widget (EA Sticky Video) that you can use to add a video to a page and make it sticky. The widget is available on the free version of Essential Addons so you don’t need to spend a dime if you just need to embed a sticky video. The premium version of Essential Addons itself comes with more advanced widgets like Image Comparison, Instagram, Testimonial Slider, Protected Content, and so on.

How to Add a Sticky Video in WordPress with Essential Addons

Before getting started, you can try to play the video below and scroll the page. You should see the video plays on the top-right corner of the screen.

Both the free version of Essential Addons and Elementor Free are available in the WordPress plugin directory so you can find them on the search box on the WordPress plugin installer (Plugins -> Add New).

There are two ways to add a sticky video with Essential Addons. First, you can add it to an Elemementr-powered page. Second, you can also add it to a regular article you create with Gutenberg.

1. Add a sticky video to an Elementor page

Create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.

Add a new section by clicking the pink button to place the video and drag the EA Sticky Video widget to the canvas area.

Go to the left panel. Under the Content tab, set the sticky position and make sure the Sticky option is enabled.

Still under the Content tab, open the Video option and set the video source. You can embed a YouTube video, a video from Vimeo or other sources (Self-hosted). Enable the video controls you want to add.

If you want to create a custom thumbnail for your video, you can open the Image Overlay option and enable the Image Overlay option.

Next, go to the Style tab to style up the appearance of the video player. From here, you set the width of the sticky video interface, scroll height to display the sticky, the color of the close button, and so on. Just play around until you get satisfied with the look.

Click the PUBLISH button on the bottom side on the left panel to publish your page.

2. Add a sticky video to Gutenberg

You can embed the sticky video you created above to Gutenberg with the help of Elementor Blocks for Gutenberg plugin. This plugin helps you to convert an Elementor template into a Gutenberg block.

On the first method above (Add a sticky video to an Elementor page), you can right-click the section handle (section that hosts the EA Sticky Video widget) and select Save as Template.

Give your template a name and click the SAVE button.

Now create a new post or page. Add a new block on Gutenberg and select Elementor Library and select the template you have just created (make sure you have installed the Elementor Blocks for Gutenberg plugin).

Note: the sticky effect works only when the video is being played.