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
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 %}