Recipes

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.

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.