VN Video
What It Does
Embeds a video player on your page with optional decorative background styling and padding controls.
When to Use It
- Product demo videos on landing pages
- Company introduction videos on the About page
- Tutorial or how-to videos in knowledge bases
- Client testimonial videos
- Event or webinar recordings
How to Add This Module
- In the page builder, find "VN Video" in the module list
- Drag it to where you want it on the page
- Click on it to open the settings panel
Settings Explained
Content Tab
Video Settings
| Setting | What It Does | Options |
|---|---|---|
| Video | Select or upload the video to display | HubSpot video picker (supports uploaded videos, YouTube, Vimeo, and external URLs) |
| Enable Background Frame | Add a decorative background image behind the video | On/Off (default: Off) |
Background Frame (only shows when Enable Background Frame is On)
| Setting | What It Does | Options |
|---|---|---|
| Background Image | Image that appears behind the video player | Upload or select from file manager |
| Loading Behavior | How the background image loads | Lazy load (default), Eager load |
Video Padding (only shows when Enable Background Frame is On)
| Setting | What It Does | Options |
|---|---|---|
| Padding Mode | How to apply padding around the video | None, Uniform (all sides same), Custom (each side different) |
| Padding Value | Size of padding when Uniform mode is selected | None, XS, S, M, L, XL, 2XL |
| Top/Right/Bottom/Left Padding | Individual padding values when Custom mode is selected | None, XS, S, M, L, XL, 2XL |
Advanced Customization
For developers only - add custom CSS classes or IDs.
Example Setups
Example 1: Simple Product Demo Video
- Click the Video field
- Select "Add video from URL"
- Paste your YouTube or Vimeo link
- Leave Enable Background Frame: Off
Example 2: Featured Video with Decorative Frame
- Select your video
- Enable Background Frame: On
- Upload a background image (abstract pattern, gradient, or brand graphic)
- In Video Padding:
- Padding Mode: Uniform
- Padding Value: L (Large)
Example 3: Video with Custom Spacing
- Select your video
- Enable Background Frame: On
- Upload your background image
- In Video Padding:
- Padding Mode: Custom
- Top Padding: XL
- Right Padding: M
- Bottom Padding: XL
- Left Padding: M
Tips
- Upload videos to HubSpot for best performance and tracking, or use YouTube/Vimeo for longer content
- Keep video files under 100MB for faster loading when uploading directly
- Use the background frame feature to make videos stand out on solid-color page backgrounds
- Choose background images that complement your brand colors without distracting from the video
- Consider using larger padding (L or XL) to give the video more visual impact
- For hero sections, a video with a background frame creates an eye-catching focal point