Video Element

Display a single Vimeo video on your site using Gutenberg blocks, shortcodes, Elementor widgets, or Bricks elements.

Free Feature

The Video element is available in the free version of Vimeify.

Overview

The Video element allows you to embed individual Vimeo videos anywhere on your site with full player customization options including autoplay, loop, controls, and more.

Key Features:

• Visual video selector
• Live preview in builder
• Player customization
• Responsive embeds
• Custom styling options
• Works with all page builders

Block Editor (Gutenberg)

Adding a Video Block

1. Edit your page or post
2. Click (+) to add a new block
3. Search for "Vimeify Video"
4. Click to add the block
5. Click Select Video in the sidebar
6. Choose your video from the library
7. Customize settings in the block sidebar
8. Publish or update your page

Block Settings

Content Settings:

• Video Selection: Choose video from library
• Player Settings:
  • Autoplay: Auto-start playback
  • Loop: Repeat video
  • Muted: Start without sound
  • Controls: Show/hide player controls
  • Title: Display video title
  • Byline: Show video author
  • Portrait: Show author avatar
  • Color: Player accent color

Styling:

• Width and alignment
• Custom CSS classes
• Border and spacing options

Shortcode

Use the video shortcode to display videos anywhere shortcodes are supported.

Basic Usage

[vimeify_video id="123456"]

Available Parameters

Parameter	Description	Default	Example
id	Vimeo video ID (required)	-	id="123456"
width	Player width in pixels	640	width="800"
height	Player height in pixels	360	height="450"
autoplay	Auto-play on load	false	autoplay="true"
loop	Loop video	false	loop="true"
muted	Start muted	false	muted="true"
controls	Show controls	true	controls="false"
title	Show video title	true	title="false"
byline	Show author	true	byline="false"
portrait	Show author avatar	true	portrait="false"
color	Player accent color	00adef	color="ff0000"

Examples

Simple Video:

[vimeify_video id="123456"]

Autoplay Video:

[vimeify_video id="123456" autoplay="true" muted="true"]

Custom Size:

[vimeify_video id="123456" width="1280" height="720"]

Minimal Player:

[vimeify_video id="123456" controls="false" title="false" byline="false" portrait="false"]

Elementor Widget

Adding a Video Widget

1. Open Elementor editor on your page
2. Search for "Vimeify Video" in the widgets panel
3. Drag the widget to your desired section
4. Click Select Video in the Content tab
5. Choose your video from the library
6. Customize settings and styling
7. Click Update to publish

Widget Settings

Content Tab

Video Selection:

• Select/change video
• Preview thumbnail
• Video information display

Player Settings:

• Autoplay: Auto-start playback
• Loop: Repeat video
• Muted: Start without sound
• Controls: Show/hide player controls
• Title: Display video title
• Byline: Show video author
• Portrait: Show author avatar
• Color: Player accent color

Link:

• Link entire widget (optional)
• Open in lightbox
• Custom URL

Style Tab

Video Container:

• Width and height
• Alignment
• Padding and margins
• Background color
• Border and shadow
• Border radius

Hover Effects:

• Overlay color
• Transition effects
• Transform animations

Advanced Tab

Layout:

• Custom CSS ID
• Custom CSS classes
• Z-index control

Motion Effects:

• Entrance animation
• Scrolling effects
• Mouse effects

Responsive:

• Hide on desktop/tablet/mobile
• Custom settings per device

Bricks Builder

Adding a Video Element

1. Open Bricks builder on your page
2. Click (+) to add element
3. Search for "Vimeify Video"
4. Click to add element to canvas
5. Click Select Video in settings panel
6. Choose your video from library
7. Customize with Bricks controls
8. Save your page

Element Settings

Content Tab

Video Selection:

• Select/change video
• Preview thumbnail
• Video title and metadata

Player Settings:

• Autoplay: Start automatically
• Loop: Repeat playback
• Muted: Start muted
• Controls: Show/hide controls
• Title: Display video title
• Byline: Show author name
• Portrait: Show author avatar
• Color: Player accent color

Wrapper Settings:

• HTML tag
• Link options
• Custom attributes

Style Tab

Use Bricks' native styling system:

Layout:

• Width and height
• Alignment
• Display and position
• Overflow control

Background & Border:

• Background color/image
• Border width and style
• Border radius
• Box shadow

Spacing:

• Padding (all sides)
• Margin (all sides)
• Gap (for flex/grid)

Effects:

• Opacity
• Transform (rotate, scale, etc.)
• Transition effects
• Filters

Advanced Tab

Attributes:

• Custom CSS ID
• Custom CSS classes
• Custom data attributes

Conditions:

• Show/hide based on:
  • User role
  • User logged in/out
  • Custom field value
  • Dynamic conditions

Interactions:

• Click actions
• Hover effects
• Scroll triggers

Responsive:

• Desktop/tablet/mobile settings
• Hide on devices
• Custom breakpoints

Responsive Design

All video elements are fully responsive by default and work seamlessly across devices.

Best Practices:

• Let videos scale naturally (avoid fixed heights)
• Test on mobile devices
• Consider hiding decorative videos on mobile
• Use muted autoplay for background videos

Next Steps

• Table Element - Display multiple videos in table format
• Grid Element - Show videos in grid layouts (Pro)
• Gallery Element - Create video galleries
• Video Management - Organize your videos