Gutenberg Integration

Vimeify provides native Gutenberg (WordPress Block Editor) blocks for displaying videos and galleries with live preview and full customization.

Available Blocks

Vimeify Video

Display a single Vimeo video with player customization.

Key Features:

• Visual video selector with search
• Live preview in editor
• Player controls (autoplay, loop, muted)
• Responsive embed
• Alignment controls

Vimeify Gallery

Display video galleries in slider or playlist layout.

Key Features:

• Gallery selector
• Two display styles (slider/playlist)
• Live preview
• Customization options
• Responsive layouts

Quick Start

Adding a Video Block

1. Click (+) button in editor or type /vimeify video
2. Search for "Vimeify Video" in Media category
3. Click Select Video and choose from your library
4. Customize settings in the sidebar
5. Publish your page

The video will display with Vimeo's player on the frontend.

Adding a Gallery Block

1. Click (+) button or type /vimeify gallery
2. Search for "Vimeify Gallery" in Media category
3. Click Select Gallery from dropdown
4. Choose display style (Slider or Playlist)
5. Customize settings in sidebar
6. Publish your page

Video Block Settings

Configure the video block using the inspector panel (right sidebar):

Video Selection:

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

Player Settings:

• Autoplay: Start playing automatically
• Loop: Repeat video when finished
• Muted: Start with sound off
• Controls: Show/hide player controls
• Title: Display video title
• Byline: Show video author
• Portrait: Show author avatar
• Color: Player accent color

Block Settings:

• Alignment: Left, Center, Right, Wide, Full
• Width: Custom dimensions or responsive
• CSS Class: Add custom classes
• Anchor: Link to specific block

Gallery Block Settings

Configure gallery blocks in the inspector panel:

Gallery Selection:

• Choose from your galleries
• Preview selected gallery
• Switch galleries anytime

Display Settings:

• Style: Slider (carousel) or Playlist (vertical list)
• Autoplay: Auto-advance slides (slider only)
• Loop: Return to first video when finished
• Controls: Show/hide navigation
• Thumbnails: Show video thumbnails

Advanced:

• Alignment options
• Custom CSS classes
• Animation settings

Display Styles Explained

Slider Style

Horizontal carousel showing one video at a time with navigation arrows.

Best for:

• Video portfolios
• Featured video showcases
• Homepage hero sections

Playlist Style

Vertical list showing all videos with thumbnails and a main player.

Best for:

• Course lessons
• Tutorial series
• Video libraries

Styling

Vimeify blocks use your theme's styles by default and are fully responsive.

Custom Styling:

• Add CSS classes in block settings
• Use theme's custom CSS editor
• Target blocks with .wp-block-vimeify-video or .wp-block-vimeify-gallery

Example:

.wp-block-vimeify-video {
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
}

Next Steps

• Video Management - Organize your videos
• Galleries - Create and manage galleries
• Upload Videos - Add more videos
• Elementor Integration - Use with Elementor
• Bricks Integration - Use with Bricks