How to Use the Video Block in the Zibster Website Builder
The Video Block in Zibster allows you to showcase video content in a clean, professional, and customizable way. You can embed videos from YouTube or Vimeo, or upload videos directly to your Zibster account.
With multiple layout styles and autoplay options, you can create dynamic video backgrounds, banner clips, or standard players that enhance your website’s design and reflect your brand style.
WAYS TO ADD A VIDEO
-
Upload a video file directly to your Zibster account
-
Embed a video using a code from YouTube, Vimeo, or another platform
Learn More:
PRO TIP!
With the Website Package, you can upload videos up to 4MB each.
Need to upload larger videos (up to 50MB each)? Purchase the Original Files option in the Premium Upgrades section of your account.
Learn More: How to Add Original Files to Zibster
STEP ONE
Log into your Zibster account and click WEBSITE from the left-side menu.
STEP TWO
Add a Video Block to Your Page
Click on the page where you want to add a video—or create a new one.
You can add a Video Block in two ways:
-
Quick Add: Click the Video Block icon in the right-side menu. The block will appear at the bottom of your page.
-
Drag & Drop: Click and hold the Video Block icon, drag it where you want it (watch for the teal line), and release.
STEP THREE
Choose a Block Style
You’ll be prompted to select a layout style:
-
Blank Block – Start from scratch using your global site styles.
-
Pre-Designed Block – Choose from stylish, ready-made layouts.
Click Select under your preferred style to add it to your page.
STEP FOUR
Edit the Video Block
Click inside the Video Block or the pencil icon in the top-right corner to open the right-side editor.
From here, choose your Video Source.
Choosing Your Video Source
Option 1: Embed a Video (YouTube, Vimeo, etc.)
-
Paste your embed code into the Embed Code field.
-
Add optional details:
-
Title & Description – Display custom text with your video.
-
Mobile Cover Image – Upload a still image to display before playback on mobile devices. (Required for banner and full-screen layouts.)
-
Button & Link – Add a clickable button that links to a page, form, file, phone number, email, or external resource.
-
Option 2: Upload a Video from Your Zibster Account
-
Select a video from your Video Library or upload a new one.
-
Add optional text and links to complete your design.
Note: Videos uploaded directly to Zibster will auto-loop in the following layouts:
- Full Screen
- Banner
-
No Crop Banner
- Text overlay center left
- Text overlay center right
- Video overlay left
- Video overlay right
- Overlay Split left
- Overlay Split right
- Overlay box left
- Overlay box right
These layouts are perfect for dynamic headers and backgrounds. The Standard layout allows non-looping playback.
STEP FIVE: Enable Autoplay For Embedded Video (Optional)
Most browsers disable autoplay for videos with sound. If you want your video to autoplay, follow these steps:
Vimeo Autoplay
- Click Share on your Vimeo video.
- In the Embed settings, check Autoplay this video.
- Copy the autoplay embed code and paste it into your Video Block.
YouTube Autoplay
- Click Share on your YouTube video and select Embed.
- Copy the embed code and modify it to include:
?mute=1&autoplay=1before the closing quotation mark. - Paste the updated code into your Video Block.
CHOOSE YOUR LAYOUT
You can choose from the following Video Block layouts. Here's a quick overview of what each one does:
Full Screen: Displays your video across the entire browser width and height. Slight cropping may occur to fill the full screen.
Banner: Displays your video as a fixed-height banner that stretches across the page.
Standard: Shows the video in its original dimensions with a standard player and play button. No cropping is applied.
No Crop Banner: Displays the full video without cropping while maintaining a banner-style layout.
Video Left: Places the video on the left side with text content on the right.
Video Right: Places the video on the right side with text content on the left.
Video Large Left: Shows a larger video on the left side with smaller text or image content on the right.
Video Large Right: Shows a larger video on the right side with smaller text or image content on the left.
Text Overlay Center Left: Places your video in the background with centered text overlay aligned to the left side.
Text Overlay Center Right: Places your video in the background with centered text overlay aligned to the right side.
Video Overlay Left: Displays the video on the left with an overlay text box or image on top of it.
Video Overlay Right: Displays the video on the right with an overlay text box or image on top of it.
Overlay Split Left: Splits the block visually, with the video and overlay content aligned to the left side.
Overlay Split Right: Splits the block visually, with the video and overlay content aligned to the right side.
Overlay Box Left: Displays the video with a boxed overlay (text or image) positioned on the left.
Overlay Box Right: Displays the video with a boxed overlay (text or image) positioned on the right.
Customize Your Video Block
STYLING OPTIONS
- Overlay Opacity – Adjust the background transparency behind text.
- Title, Description & Button Alignment – Align text left, right, or center.
- Space Adjustments – Control the spacing above, below, and inside the block.
COLORS
Set custom colors for video overlays, backgrounds, and text.
BACKGROUND
Upload a background image and choose display settings: Tile, Top Left, Centered, or Cover.
FONTS
Override global font settings for: Title, Subtitle, and Button Text.
ANIMATIONS
Add hover animations for buttons (Fill, Overlay, Scale, Arrow, or None).
Click SAVE CHANGES to apply updates and publish your video.
