Skip to main content

Handoff Video Module

The Handoff Video module displays videos from SCF/ACF Flexible Content sub-fields. It supports direct video URLs, uploaded video files, and oEmbed content from services like YouTube and Vimeo.

Purpose and When to Use​

Use the Handoff Video module when you need to:

  • Display video content stored in Flexible Content fields
  • Create video sections with dynamic video sources
  • Build video galleries or testimonial sections with video content
  • Show product demos or explainer videos from client-editable fields
Alternative Approach

You can also use the standard Divi Video module with Dynamic Content to pull from Flexible Content fields. The Handoff Video module provides a simplified interface with automatic field binding.

Compatibility and Performance Notes​

  • Divi Version: 5.x or higher
  • Field Types: Works with text, textarea, URL, file, and oEmbed field types
  • Video Formats: Supports MP4, WebM, and other browser-compatible formats
  • oEmbed: Supports YouTube, Vimeo, and other oEmbed-compatible services
  • Browser Autoplay: Modern browsers require videos to be muted for autoplay to work

Add to Page​

  1. Open the Divi Visual Builder on a Divi Handoff Layout
  2. Click the + icon to add a new module
  3. Search for "Handoff" and select Divi Handoff: Video
  4. In Main settings, select the SCF/ACF field containing the video
  5. Configure playback and sizing options
  6. Save the layout
note

The module only displays video content when viewing a page that has the associated Flexible Content layout with video data entered.

Settings​

Content Settings​

Main Group​

SettingTypeDefaultDescription
SCF/ACF FieldSelectnoneSelect the SCF or ACF field containing the video URL or file
Fit to ContainerToggleOffScale the video to fill the parent container. Uses CSS object-fit: cover, which may crop the video to maintain aspect ratio
Video Play ModeToggleOffEnable autoplay mode. When enabled, the video plays automatically with sound muted (required by browsers for autoplay)

Background Group​

Standard Divi background options for the module container.

Design Settings​

Sizing Group​

Standard Divi sizing options (width, height, max-width, etc.)

SCF/ACF Size Fields Group​

SettingTypeDefaultDescription
Video Width FieldSelectnoneSelect an SCF/ACF field containing a dynamic width value. Overrides the standard width setting
Video Height FieldSelectnoneSelect an SCF/ACF field containing a dynamic height value. Overrides the standard height setting
Dynamic Sizing

Dynamic size fields accept numeric values (treated as pixels) or CSS values with units (e.g., "100%", "50vw"). This allows editors to control video dimensions from the content fields.

Additional Design Options​

GroupDescription
SpacingMargin and padding controls
BorderBorder style, width, and color
Box ShadowShadow effects
FiltersCSS filter effects (blur, brightness, etc.)
TransformRotation, scale, and translate effects
AnimationEntry animation effects

Advanced Settings​

GroupDescription
VisibilityShow/hide on desktop, tablet, or phone
TransitionHover transition duration and style
PositionAbsolute, fixed, or relative positioning
ScrollScroll-based animation effects

Supported Field Types​

The Handoff Video module supports multiple SCF/ACF field types:

Field TypeReturn FormatNotes
Text—Enter a direct video URL
Textarea—Enter a video URL (only first line used)
URL—Best for video URLs
FileURLReturns the video file URL directly
FileArrayUses the url property from the array
FileIDRetrieves the URL from the attachment ID
oEmbed—Embeds YouTube, Vimeo, and other oEmbed providers
File Field Recommendation

When using a File field for videos, the URL return format provides the best performance as it requires no additional database queries.

Video Playback Behavior​

The module outputs an HTML5 <video> element with the following default behavior:

  • Controls: Visible by default (play, pause, volume, fullscreen)
  • Loop: Enabled by default
  • Preload: Set to "metadata" for performance

Autoplay Mode​

When Video Play Mode is enabled:

  • Video starts playing automatically when the page loads
  • Sound is muted (required by browsers for autoplay)
  • Loop continues playing indefinitely
<!-- Output with autoplay enabled -->
<video loop controls muted autoplay>
  <source src="video.mp4" />
</video>

oEmbed Content​

For oEmbed fields (YouTube, Vimeo), the module outputs the embedded player HTML provided by the service rather than an HTML5 video element. Autoplay and other settings may be controlled by the embedded player's URL parameters.

Examples and Common Patterns​

Example 1: Hero Section with Background Video​

Create a hero section with a full-width background video:

  1. Create an SCF/ACF layout with:

    • hero_video (File field, return format: URL)
    • hero_title (Text field)
    • hero_subtitle (Textarea field)

  2. In your Divi Handoff Layout:

    • Add a Section with desired height
    • Add the Handoff Video module
    • Select hero_video as the SCF/ACF Field
    • Enable Fit to Container
    • Enable Video Play Mode for autoplay
    • Position the video module absolutely behind text content

Example 2: Testimonial with Video​

Display customer testimonial videos:

  1. Create an SCF/ACF layout with:

    • testimonial_video (URL field)
    • customer_name (Text field)
    • company (Text field)

  2. In your Divi Handoff Layout:

    • Add a Row with two columns
    • Add Handoff Video module, select testimonial_video
    • Add Handoff Text modules for name and company
    • Style as desired

Example 3: Dynamic Video Sizing​

Control video dimensions from content fields:

  1. Add to your SCF/ACF layout:

    • video_url (URL field)
    • video_width (Text field) — e.g., "100%", "640px"
    • video_height (Text field) — e.g., "auto", "360px"

  2. In the Handoff Video module:

    • Select video_url as the SCF/ACF Field
    • In Design > SCF/ACF Size Fields:
      • Set Video Width Field to video_width
      • Set Video Height Field to video_height

Pitfalls and Limits​

Browser Autoplay Restrictions

Modern browsers block autoplay of videos with sound. When Video Play Mode is enabled, the video is automatically muted. Users must manually unmute to hear audio.

oEmbed Limitations

For oEmbed content (YouTube, Vimeo), the module outputs the provider's embed code. Playback settings like autoplay may be controlled by URL parameters in the original field value, not the module settings.

Limitations:

  • Single video only — The module displays one video per instance. For video galleries, use multiple modules or the Handoff Repeater module
  • No poster image setting — The video thumbnail is determined by the browser's default behavior or the video's embedded poster
  • Autoplay requires muted — This is a browser requirement, not a plugin limitation

What's Next​