The Video Pop Up block allows you to embed video content from YouTube, Vimeo, or a self-hosted source on any SeedProd page. Unlike a standard embedded player, the block supports a lightbox mode, a sticky video that follows visitors as they scroll, and an image overlay that acts as a custom thumbnail — giving you full control over how visitors discover and interact with your video.
Whether you’re showcasing a product demo, a testimonial, or an explainer video, the Video Pop Up block offers advanced playback options — including autoplay, mute, loop, privacy mode, and a teaser video feature — so you can tailor the viewing experience to match your page goals and audience preferences.
Adding the Video Pop Up Block to Your Pages
Follow these steps to add a Video Pop Up block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Video Pop Up block into the desired section of your page.
Step 2: Configure Content Settings
Once added, click on the Video Pop Up block to open its settings. In the Content tab, settings are organized into four sections.
Video:
- Source: Choose your video source — YouTube, Vimeo, or Custom (for self-hosted or externally hosted video files).
- YouTube URL (YouTube only): Enter the full URL of the YouTube video.
- Vimeo URL (Vimeo only): Enter the full URL of the Vimeo video. Note: Sticky Video requires a Starter, Standard, Advanced, Plus, Pro, Business, Premium, or Enterprise Vimeo account.
- External URL / Custom Video URL (Custom only): Toggle External URL to link to a hosted video file, or enter the direct URL to your video. You can also use Select Custom Video to choose a file from your media library.
- Start Time: Specify a time (in seconds) where the video should begin playing.
- End Time: Specify a time (in seconds) where the video should stop playing.
Video Options:
- Autoplay: Automatically start the video when the page loads.
- Play on Mobile: Play the video inline on mobile devices instead of automatically entering fullscreen mode.
- Mute: Start the video muted to avoid disrupting the visitor’s experience.
- Loop: Continuously loop the video when it reaches the end.
- Show Player Controls: Show or hide the video player’s playback controls.
- Privacy Mode: When enabled, YouTube and Vimeo will not store visitor information unless they actively play the video.
- Lazy Load: Defer loading the video until it becomes visible in the viewport to improve page load speed.
- Intro Title / Intro Portrait / Intro Byline (Vimeo only): Toggle the display of the video title, author portrait, and author byline shown in the Vimeo intro.
- Controls Color (Vimeo only): Set the color of the Vimeo player controls.
- Suggested Videos (YouTube only): Choose what appears after the video ends — Current Video Channel (related videos from the same channel) or Any Video.
- Show Download Button (Custom only): Show a download button on the custom video player.
- Preload (Custom only): Set how the video loads on page load — Metadata (loads video info only), Auto (loads the full video), or None.
- Poster: Set a poster image that displays before the video begins playing.
- Enable Sticky Video: When enabled, the video player docks to a corner of the screen as visitors scroll past it, keeping the video visible throughout the page.
Teaser Video:
- Enable Teaser Video: Replace the static thumbnail with a short looping teaser video that plays silently on the page. When a visitor clicks it, the full video opens. Note: Enabling this option disables the Image Overlay feature.
- Teaser Video Play Icon: Choose the icon displayed over the teaser video to indicate it is clickable.
- Icon Font Size: Set the size of the teaser play icon.
- Show Banner: Display a banner over the teaser video (for example, a “Click to hear audio” prompt). Configure the banner text, background color, text color, typography, and icon.
Image Overlay:
- Enable Image Overlay: Replace the default video thumbnail with a custom image. Visitors click the image to open the video. Note: Enabling this option disables the Teaser Video feature.
- Choose Image: Select or upload the overlay image from your media library.
- Image Size: Set the width and height of the overlay image in pixels or as a percentage.
- Show Play Icon: Toggle the play icon that appears over the overlay image.
- Icon Font Size: Set the size of the play icon displayed on the overlay image.
- Icon Opacity: Set the transparency of the play icon (0–10 scale).
- Icon Color: Set the color of the play icon on the overlay image.
- Enable Lightbox: When enabled, clicking the overlay image opens the video in a lightbox overlay instead of playing it inline.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Video Pop Up block.
Styles:
- Width: Set the width of the video player as a percentage of its container using a slider.
- Aspect Ratio: Choose the aspect ratio of the video player — 1:1, 3:2, 4:3, 9:16, 16:9, or 21:9.
- Alignment: Set the horizontal alignment of the video player — Left, Center, or Right — with per-device controls for desktop, tablet, and mobile.
- Shadow: Apply a box shadow to the video player using preset sizes — None, Hairline, Small, Medium, Large, X Large, or 2X Large.
Spacing:
- Margin: Set the outer spacing around the block on all four sides, with independent controls for desktop, tablet, and mobile.
- Padding: Set the inner spacing inside the block wrapper on all four sides, with per-device controls.
Attributes:
- Custom Class: Add one or more custom CSS classes to the block wrapper for targeted styling.
- CSS ID: SeedProd automatically generates a unique CSS ID for this block. You can use it to reference the block in custom CSS or JavaScript.
- Custom Attributes: Add custom HTML attributes to the block wrapper element. Enter each attribute on a new line using the key|value format.
Device Visibility:
- Hide on Desktop: Toggle to hide the block when viewed on desktop screens.
- Hide on Tablet: Toggle to hide the block when viewed on tablet screens.
- Hide on Mobile: Toggle to hide the block when viewed on mobile screens.
Animation Effects:
- Scrolling Effect: Apply a scroll-triggered animation to the block, including Vertical Scroll and Horizontal Scroll options with direction, speed, and viewport offset controls.
- Mouse Effect: Apply a mouse movement-driven parallax effect to the block.
Step 4: Save Your Changes
Once you have finished configuring the Video Pop Up block and customizing its appearance, make sure to save your work.
You’ve successfully added a Video Pop Up block to your page! With support for YouTube, Vimeo, and self-hosted video along with image overlays, teaser previews, sticky playback, and lightbox modes, this block gives you everything you need to create a compelling video experience. Experiment with the playback options and overlay settings to find the combination that best captures your visitors’ attention.