Call-to-action modal

The modal is an overlay with a title, a description and a button. Typical uses: “join to keep watching”, newsletter sign-ups, or the end of a free preview.

Play it: the modal opens at 0:04.

When it opens

• On pause, by default. Pausing opens it, resuming closes it.
• At a given second, with modal-delay: when playback crosses that second, the video pauses and the modal opens. After that, pausing doesn’t reopen it until the viewer has closed it once.

It never opens:

• if it has no content: you need at least modal-title, modal-description or a custom modal-cta-text;
• with modal-enabled="false";
• when the browser pauses the video itself (background tab, app minimised on a phone);
• in Picture-in-Picture or while casting;
• after pause({ silent: true }).

<!-- On pause -->
<vega-player
  src="/trailer.mp4"
  modal-title="Members only"
  modal-description="Get unlimited access to every video."
  modal-cta-text="Join now"
  modal-cta-url="/join">
</vega-player>

<!-- At 0:30 -->
<vega-player src="/preview.mp4" modal-title="Free preview ended" modal-cta-text="Subscribe" modal-cta-url="/subscribe" modal-delay="30"></vega-player>

It doesn't protect content

modal-delay pauses the video in the browser, but the whole file can still be downloaded. For non-members, serve a separately cut preview file, never the full video stopped by JavaScript.

Content

modal-title and modal-description accept a few inline tags: <br>, <b>, <strong>, <i>, <em>, <span> and <small>. Other tags become plain text and all attributes are removed.

<vega-player
  modal-title="Only for <strong>Members</strong>"
  modal-description="Unlimited access.<br><small>Cancel anytime.</small>"
  modal-description-color="#a48c79">
</vega-player>

modal-cta-url only accepts http:, https:, mailto: and tel: links; anything else (such as javascript:) becomes #.

Button colors

Attribute	Default
cta-bg-color	color-primary
cta-text-color	#000
cta-hover-bg-color	#fff
cta-hover-text-color	#000

From JavaScript

player.showModal();       // opens it and moves focus inside
player.hideModal();       // closes it and restores focus
player.isModalVisible;    // true / false

player.addEventListener('vega-player:cta-click', (e) => {
  analytics.track('cta', { url: e.detail.url });
});

Accessibility

The modal has role="dialog" and aria-modal="true". Focus moves to its close button when it opens, Tab cycles inside it, Escape closes it, and focus returns to where it was.