Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Video Dialog can be used to display just an video or an video with text description. Important Notes: When building a video only dialog, set spacing prop to none and transparent prop to true. When building a video dialog with description, use the footer for the description text. To automatically play a Brightcove video when a dialog opens, you must add some specific data-attributes. These attributes delay the video initialization. When these attributes are present, the video will initialize when the dialog opens, automatically begin playing, and pause when the dialog closes: data-delayed-account (replaces data-account) data-delayed-player (replaces data-player) data-delayed-video-id (replaces data-video-id) data-video-delayed (flag to delay the initialization) Demo
This is the video description.
Twig
{# Video only dialog #}
{% set image_dialog_content %}
  {% set video %}
    {% set brightcove %}
      <video-js
        data-delayed-account="1900410236"
        data-delayed-player="O3FkeBiaDz"
        data-delayed-video-id="4892122320001"
        data-video-delayed
        data-embed="default"
        controls
        data-media-title
        data-media-duration
        class="c-base-video"></video-js>
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: brightcove,
      ratio: 'wide'
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: video,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: image_dialog_content,
  spacing: 'none',
  transparent: true,
  attributes: {
    id: 'dialog-video'
  },
} only %}

{# Video + description dialog #}
{% set caption_dialog_content %}
  {% set video %}
    {% set brightcove %}
      <video-js
        data-delayed-account="1900410236"
        data-delayed-player="O3FkeBiaDz"
        data-delayed-video-id="4892122320001"
        data-video-delayed
        data-embed="default"
        controls
        data-media-title
        data-media-duration
        class="c-base-video"></video-js>
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: brightcove,
      ratio: 'wide'
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: video,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: 'This is the video description.',
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: caption_dialog_content,
  spacing: 'small',
  attributes: {
    id: 'dialog-description'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.