Video Modal Usage
Videos opening and playing in a modal are handled by a couple data attributes.
Button Attribute
To open a modal, the triggering button requires a data-bolt-modal-target attribute. The value of this attribute is the target modal's class. There is JS that will handle the opening on target modal based on the attribute's value.
Video Attributes
To prevent a video from initializing on page load, the video-js requires a couple of attributes to delay the initialization. There are four attributes that are required, three of these replace the default Brightcove attributes.
- 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)
Within the Brightcove initialization logic these attributes will defer the video initialization until the modal:show event is fired. The JS will create the Brigthcove required attributes on the fly and start the initialization shortly after. After the modal is opened, it will automatically start playing the video
Demo