Bricks Integration

Vimeify provides native Bricks Builder elements for displaying Vimeo videos and galleries with Bricks' powerful styling system and query builder.

Available Elements

Vimeify Video

Display a single Vimeo video with Bricks' native controls.

Key Features:

• Visual video selector
• Live preview in builder
• Bricks styling system
• Query loop compatible
• Conditional display
• Dynamic data support

Vimeify Gallery

Display video galleries using Bricks' design tools.

Key Features:

• Gallery selector
• Two display styles (slider/playlist)
• Full Bricks styling
• Template integration
• Responsive controls
• Animation support

Quick Start

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

Adding a Gallery Element

1. Open Bricks builder
2. Click (+) to add element
3. Search for "Vimeify Gallery"
4. Add element to canvas
5. Select gallery from dropdown
6. Choose display style (Slider or Playlist)
7. Style using Bricks controls
8. Save your page

Video 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)

Typography (if applicable):

• Font family and size
• Font weight and style
• Text color and alignment

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

Gallery Element Settings

Content Tab

Gallery Selection:

• Choose gallery
• Preview gallery
• Gallery information

Display Settings:

• Style: Slider or Playlist
• Autoplay: Auto-advance slides (slider)
• Loop: Continuous playback
• Speed: Transition speed (slider)
• Navigation: Show arrows and dots
• Thumbnails: Display video thumbnails

Player Defaults:

• Default settings for all gallery videos
• Override individual video settings

Style Tab

Use Bricks styling for:

Gallery Container:

• Layout and spacing
• Background and borders
• Shadow and effects

Video Items:

• Item dimensions
• Spacing between items
• Thumbnail styling
• Hover effects

Navigation (Slider):

• Arrow design and position
• Dot style and color
• Active state styling

Player (Playlist):

• Main player size
• Thumbnail list layout
• Active video highlight
• Scroll behavior

Advanced Tab

Same options as Video Element (Attributes, Conditions, Interactions, Responsive).

Display Styles Explained

Slider Style

Horizontal carousel with customizable navigation.

Best for:

• Showcasing featured videos
• Portfolio presentations
• Homepage highlights

Bricks Customization:

• Use Bricks' carousel controls
• Style arrows and pagination
• Add custom animations
• Responsive slide counts

Playlist Style

Vertical layout with player and video list.

Best for:

• Tutorial series
• Course content
• Video documentation

Bricks Customization:

• Flex/grid layout control
• Custom thumbnail sizes
• Active state styling
• Scrollable list options

Template Integration

Use Vimeify elements in Bricks templates:

Single Video Template

Create a template for vimeify-video post type:

1. Navigate to Bricks → Templates
2. Add new template
3. Set type to "Single"
4. Select "Vimeify Video" post type
5. Add Vimeify Video element
6. Use dynamic data for video
7. Design your layout
8. Set template conditions

Video Archive Template

Create an archive for video categories:

1. Add new template
2. Set type to "Archive"
3. Select "Vimeify Category" taxonomy
4. Add query loop
5. Use Vimeify Video elements
6. Style video cards
7. Add pagination
8. Apply to video archives

Header/Footer

Add videos to global templates:

1. Edit header/footer template
2. Add Vimeify elements
3. Configure for global use
4. Style consistently

Query Loop Integration

Use Vimeify videos in query loops:

Video Grid with Query Loop

1. Add Container element
2. Enable Query Loop
3. Set query:
   • Post type: vimeify-video
   • Posts per page: 12
   • Order by: Date
4. Add Vimeify Video element inside
5. Video auto-populates from query
6. Style the grid layout

Filtered Video List

Create filterable video archive:

1. Add query loop container
2. Set taxonomy query (categories)
3. Add filter controls
4. Include Vimeify Video elements
5. Enable AJAX filtering
6. Style active states

Related Videos

Show related videos on single post:

1. Add query loop
2. Query related videos:
   • Same category
   • Exclude current
   • Limit to 3-6
3. Add Vimeify Video elements
4. Create compact layout

Conditional Display

Show videos based on conditions:

User Role:

Show video only to subscribers
Condition: User Role > is > Subscriber

Custom Field:

Show if featured video exists
Condition: Custom Field > is not empty > featured_video

Time-Based:

Show during business hours
Condition: Current Time > between > 9:00-17:00

Responsive Design

Bricks' responsive controls work seamlessly with Vimeify:

Breakpoint Settings:

• Desktop (default)
• Tablet (< 1024px)
• Mobile (< 768px)

Common Adjustments:

• Hide decorative videos on mobile
• Stack slider items vertically
• Reduce player dimensions
• Simplify navigation
• Adjust spacing and sizing

Next Steps

• Video Management - Organize your videos
• Galleries - Create galleries
• Gutenberg Integration - Use with Gutenberg
• Elementor Integration - Use with Elementor
• Video Upload - Add more videos