What is a Video Popup Block?
A Video Popup Block allows you to add a video from the Media Library or an external source (such as YouTube) in a pop-up viewer.
How it Works
The Video Popup Block accomplishes two key goals. It reduces hefty load times that come with hosting videos on the page, by allowing you to display the a thumbnail and open the video in a pop-up viewer. It also enables you to keep the user on your site, instead of linking them to the video hosting platform to watch your video.
Block Settings
The Video Popup Block itself has minimal settings, because most of the configuration happens on the blocks within the Video Popup Block. The supported child blocks are Image Block, Heading Block, Paragraph Block and the Featured Image Block for Query Block usages.
The video link is added in the Toolbar Menu, within the visual editor.
Toolbar
Link Settings
These settings govern the link to your video, and how it functions.
Video Link
Copy/paste the video’s link, from either YouTube or Vimeo, into this field and hit enter.
YouTube
Copy/paste the “watch” URL directly from the browser’s address bar. Do not use YouTube’s sharing link options, these will not work. You know you have the right one if you see /watch?v= in the URL.
Vimeo
Copy/paste the “player” URL, found in the video’s share embed code. You know if you have the right URL if it starts with player.vimeo.com. Do not copy anything beyond the end of the unique numbers, ie. https://player.vimeo.com/video/223682190
Autoplay
To get either a YouTube or Vimeo video to autoplay when the pop-up is active, append the entered URL with ?autoplay=1 into the Video Popup Block.
More about
Padding
Settings Tab
Custom Fields
These settings are only accessible to Pro users.
Overrides
This allows you to replace the need to set a link in the Toolbar with a URL set in a custom field, within a post. This override will display a video popup within a Query Block setup.
More about
Custom FieldsAdvanced Settings
These settings are only accessible to Pro users (with the exception of HTML anchors), and also only accessible to site admins.
Additional CSS Class(es)
This allows you to enter a unique Class identifier, to facilitate custom CSS targeting within the theme for custom development.
It also enables the use of Refoundry utility classes.
More about
Theme Customizations
