Skip to main content
Version: Beaver Builder 2.11

Video

Use Video to render a self-hosted media library video or an embedded video from providers like YouTube and Vimeo.

Usage​

Use Video to render a self-hosted video from the WordPress media library or an embedded video from a provider such as YouTube or Vimeo. The module outputs a responsive player with optional poster image, autoplay, looping, lightbox playback, sticky-on-scroll behavior, and Schema.org VideoObject structured data for SEO.

Use Video for product demonstrations, tutorials, testimonials, hero backgrounds, and any layout where video is the primary content. Choose the Media Library type when you need full control over native player controls, and the Embed type when a provider should handle delivery and playback.

Module Settings​

The Video module settings control the video source, playback behavior, lightbox display, sticky scroll behavior, and structured data markup.

General Tab​

The General tab configures the video source, poster image, playback options, and native player controls.

Video Type Default: Media Library

Selects the source of the video content.

  • Media Library: Plays a video file uploaded to the WordPress media library using the native WordPress player.
  • Embed: Renders an oEmbed URL or custom embed markup from a provider such as YouTube or Vimeo.
Media Library Settings
Main Video (MP4) Supports: Field Connections

The primary video file. Supports mp4, m4v, webm, ogv, and wmv formats. This format is supported by most modern browsers.

Fallback Video (WebM) Supports: Field Connections

An optional WebM file used as a fallback. This format is required to support browsers such as Firefox and Opera.

Auto Play Default: No

Starts playback automatically when the page loads. Most browsers require muted playback for autoplay to succeed.

Loop Default: No

Restarts playback from the beginning each time the video reaches the end.

Video Controls

The Video Controls section toggles the visibility of individual native player controls.

Video Controls
Play/Pause Default: Show

Shows or hides the play and pause button.

Timer Default: Show

Shows or hides the current playback time indicator.

Time Rail Default: Show

Shows or hides the progress bar and scrubber.

Duration Default: Show

Shows or hides the total video duration display.

Volume Default: Show

Shows or hides the volume control.

Fullscreen Default: Show

Shows or hides the fullscreen toggle button.

Embed Settings
Embed Code Supports: Field Connections

A URL from a supported oEmbed provider such as YouTube or Vimeo, or custom embed markup using <iframe>, <video>, or <object> tags. WordPress oEmbed handles URL embedding automatically.

Show Video on Lightbox Default: No

Controls whether the video plays inline or opens in a fullscreen lightbox when the poster image is clicked. A poster image is required for lightbox playback to work.

  • Yes: Hides the inline player and opens the video in a Magnific Popup lightbox triggered by the poster image.
  • No: Plays the video inline in the page.
Poster

An image displayed before playback begins, and used as the lightbox trigger when Show Video on Lightbox is set to Yes.

Sticky on Scroll Default: No

Controls whether the player detaches and remains visible in a fixed position once the user scrolls past its original location.

  • No: Keeps the player in its original position on the page.
  • Yes: Pins the player to a fixed position on scroll so playback continues while the user reads further down the page.

Structured Data Tab​

The Structured Data tab adds Schema.org VideoObject markup so search engines can index the video with richer metadata. The module renders the metadata as inline HTML Microdata on the player's wrapping element. Only fields with values are emitted.

<div class="fl-video fl-wp-video" itemscope itemtype="https://schema.org/VideoObject">
  <meta itemprop="name" content="Product Walkthrough" />
  <meta itemprop="uploadDate" content="2026-04-12T09:30:00+00:00" />
  <meta itemprop="thumbnailUrl" content="https://example.com/wp-content/uploads/2026/04/poster.jpg" />
  <meta itemprop="description" content="A two-minute overview of the new dashboard." />
  <meta itemprop="contentUrl" content="https://example.com/wp-content/uploads/2026/04/walkthrough.mp4" />
  <meta itemprop="embedUrl" content="https://example.com/embed/walkthrough" />
  <!-- video player markup -->
</div>

The uploadDate value is normalized to ISO 8601 (DATE_ATOM) at render time, regardless of the format entered in the field.

Enable Structured Data? Default: No

Enables Schema.org VideoObject markup for the video. Setting this to Yes reveals the metadata fields used to populate the markup.

Structured Data Settings
Video Name Supports: Field Connections

The title of the video used for the name property.

Video Description Supports: Field Connections

A short description of the video used for the description property.

Content URL Supports: Field Connections

The direct URL to the video file used for the contentUrl property.

Embed URL Supports: Field Connections

The URL used to embed the video used for the embedUrl property.

Video Thumbnail Supports: Field Connections

A representative still image used for the thumbnailUrl property.

Upload Date Supports: Field Connections

The date the video was uploaded, used for the uploadDate property.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.