Vimeo Showcase Widget for Elementor

Vimeo and elementor icons next to video camera

On a client’s site, we recently ran into an issue with a disappearing Vimeo showcase embedded in an Elementor HTML block. It looked just fine in the editor. Sometimes it even displayed on the frontend for a while. But then, when certain users would go back in to edit a different section of the page… the showcase would disappear, mysteriously leaving only the outer <div> of its embed code (more on this later).

Embedding a Vimeo showcase in Wordpress? No problem

Want to embed a Vimeo showcase in the Wordpress block editor, Gutenberg? You’re in luck! Just search for the Vimeo block, paste in the showcase URL, and you’re good to go.

Using Elementor? It’s still doable. Elementor’s video widget doesn’t work with showcases, but you can still paste the showcase’s embed code into an HTML widget.

…unless you’re running Wordpress multisite and Elementor

For security reasons, Wordpress multisites only allow the “super admin” to use certain HTML tags like <iframe> and <script>. Unfortunately, those happen to be exactly the tags needed for most 3rd party embeds like videos or forms. Limiting them makes sense—especially in a multisite environment, letting a user put any script they want in a custom HTML block might put the whole network at risk.

We solved The Mystery of the Missing Showcase when we figured out that even if a super admin originally added the showcase embed code, any non-super admin editing the page triggered Wordpress to re-filter all the HTML and remove the embed code. Only super admins could edit these pages, which wasn’t feasible long-term.

A simple widget to the rescue

I got around this by making a simple Elementor widget that accepts a Vimeo showcase ID and spits out the embed code. You can view or download it on Github: