Recipes

Popup explainer video

Use when the page should begin with a poster image, while the full player is available on demand for a procedure walkthrough, testimonial, or product overview.

Display mode:         Popup
Player Color:         your brand color, contrast warning cleared
Player Aspect Ratio:  16:9
Show controls:        on
Loop video:           off
Include SEO Schema:   on

Popup renders the selected poster as a button. When a visitor selects it, the same player opens in a lightbox and requests playback. The button works with a pointer, Enter, and Space; visitors close the lightbox with its close control, the backdrop, or Escape.

The user action lets the player request sound, but browser and device settings can still prevent audible autoplay. Review captions before publishing, and keep controls on so visitors can pause, adjust volume, and turn captions on.

Explainer opened from a text link

Use when the page already has a strong layout and the video should open from a short call to action instead of adding another large thumbnail.

Display mode:         Popup
Lightbox trigger:     Text link
Link text:            Watch the two-minute overview
Show controls:        on
Include SEO Schema:   on

The generated link opens the same lightbox and player as the thumbnail trigger. Keep the link text specific enough that a visitor knows it opens a video. If the lightbox script cannot load, the link opens the hosted player directly.

Accessible explainer video

Use when the video explains something the visitor needs: a procedure walkthrough, an onboarding video, a product demo. This is the right default for most video.

Player Color:         your brand color, contrast warning cleared
Player Aspect Ratio:  16:9
Enable autoplay:      off
Show controls:        on
Loop video:           off
Include SEO Schema:   on

Review the automatic captions before publishing, and fill in the video's description so screen reader users hear a meaningful label for the player. Controls stay on so a viewer can pause, adjust volume, and turn captions on.

Explainer with a full transcript on the page

Use when the video is the main content of the page and you want the words indexable and readable without playing anything.

Player Aspect Ratio:  16:9
Show controls:        on
Include SEO Schema:   on

Download the caption file from the video's Captions section, then paste the text into the page below the player. Search engines index the page text, and visitors who would rather read do not have to play the video. See Captions and transcripts.

Silent looping hero background

Use when the video is atmosphere behind a headline and carries no information. Keep it short, a few seconds, and keep the poster image usable on its own.

Player Aspect Ratio:  16:9
Enable autoplay:      on
Show controls:        off
Loop video:           off
Include SEO Schema:   off

Two deliberate choices here. Loop off keeps the player from restarting, which respects visitors sensitive to motion and keeps a single view in reporting; turn it on only if the motion genuinely needs to continue. SEO Schema off avoids telling search engines the page is about a decorative clip.

Autoplay forces muted playback, so put nothing in the audio track that matters. If the video conveys anything the visitor needs, use the explainer recipe instead and leave controls on.

Looping product loop with visible controls

Use when a short repeating clip demonstrates a feature and you want it running, but a visitor should still be able to stop it.

Enable autoplay:      on
Show controls:        on
Loop video:           on
Include SEO Schema:   off

The player reports one start and one completion for the first pass and then stays quiet on later loops, so a looping clip does not inflate your engagement numbers. See Video analytics events.

Vertical video for mobile-first placement

Use when you shot the video for phones and want it tall rather than sitting inside a widescreen box with empty bars on both sides.

Player Aspect Ratio:  9:16
Show controls:        on
Enable autoplay:      off

The snippet is sized for 16:9, so also change the padding percentage in its first line to 177.78%. That one number is the only edit:

<div class="op_responsive_padding" style="padding:177.78% 0 0 0;position:relative;">
  <div class="op_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
    <iframe
      src="VIDEO_URL"
      allow="autoplay; fullscreen"
      title="Video: ..."
      width="100%"
      height="100%"
    ></iframe>
  </div>
</div>

Put the snippet in a narrow column rather than a full-width one. A tall player allowed to fill a wide desktop container ends up taller than the screen. Most page builders let you set a maximum width on the block; if yours does not, your web team can cap it.

Square video for a social-style feed block

Use when the video sits in a grid or card layout where a square tile fits the design.

Player Aspect Ratio:  1:1
Show controls:        on

Change the padding percentage in the snippet's first line to 100%. Upload a square poster image too, since the poster is cropped to the player shape.

Video lead capture before playback

Use when the video is a strong starting point for a guide, appointment, or follow-up, and you want to collect one email address before a visitor watches.

Display mode:         Inline or Popup
Enable engagement:    on
Show when:            Before playback
Show:                 Email capture
Lock interaction:     off for an optional form, on for a required form
Show controls:        on

Write an offer that matches the video, such as a checklist or consultation guide. With Lock interaction off, visitors can choose Continue without sharing. With it on, submission is required before playback begins.

Copy the new snippet and replace the one on your page after every Engagement change. Install the Web SDK on the hosting page to measure the interaction in Video Analytics. To route completed video forms, allow and map the standard form_submit event in your destination.

Timed campaign video

Use when a campaign page should present a short video after the visitor has had time to read the opening message.

Display mode:         Popup
Lightbox trigger:     Time on page
Delay in seconds:     15
Show controls:        on
Loop video:           off

The lightbox opens once per browser session and starts muted. Keep controls visible so the visitor can close, pause, or enable sound immediately. Test the delay on mobile and desktop, and avoid placing it over a form step or another modal.

Video opened from an email or campaign link

Use when a link should land on a page and immediately open one specific video.

Display mode:         Popup
Lightbox trigger:     URL parameter
Show controls:        on
Loop video:           off

Copy the generated snippet to the destination page. Build the campaign link with the generated ours-video parameter and value, preserving any other campaign parameters already on the URL. The player opens muted because page arrival is not a direct playback action.

Testimonial next to a form

Use when the video builds confidence while the visitor is deciding, and the form is the actual goal.

Player Aspect Ratio:  16:9
Enable autoplay:      off
Show controls:        on
Loop video:           off
Include SEO Schema:   on

Autoplay off matters here: a video that starts talking on its own competes with the form. Once the Web SDK is on the page, you can compare completion rate against form submissions in Video Analytics to see whether people who watch convert more.

To prove the video is doing the work rather than assume it, run the page with and without it as an experiment and compare form submissions between the two.

Video whose engagement you send to ad platforms

Use when you want video watchers usable as a signal in campaigns or in your warehouse.

Show controls:        on
Include SEO Schema:   on

Nothing in the embed changes for this one. Install the Web SDK on the hosting page, then allow and map video_start, video_progress, and video_complete to the destinations you want them in. See Video analytics events for the properties each event carries.

A browsable video library

Use when the collection is the destination: a patient education library, an onboarding series, a session archive. You want one page a visitor can browse rather than one embed per video.

Channel:              created and published
Videos:               assigned and ordered
Brand color, logo:    set on the channel

Group the videos into a channel, then either link to the channel URL or paste the channel's embed code into a page. Adding a video to the channel later updates the page without anyone touching your site. See Video Channels.

Player and files on your own domain

Use when your site is configured to block content loaded from other companies' domains, or you want every request on your own domain.

Domain selector:      your custom domain
Player Aspect Ratio:  16:9
Show controls:        on

Pick your domain from the selector above the snippet before copying, so both the player and the video files load from your own domain. This requires a custom domain already configured and ready.