WebMD Ignite DX Engine

Video: Default 

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-8 col-sm-12">
        <h2>Direct Video</h2>

        <div class="hgm-video" data-img-alt="Video Poster Image" data-img="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" data-video-bg-hex="0080FF" data-video-play-bg-hex="000073" data-video-play-bg-alpha="30" data-video-play-icon-hex="D76A00">
            <div class="hgm-video__poster">
                <picture>
                    <source srcset="" media="(min-width: 768px)">
                    <img src="" data-src="" alt="" class="hgm-video__image">
                </picture>
            </div><!-- &__poster -->
            <video class="hgm-video__video" src="" data-src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" controls></video>
        </div><!-- .hgm-video -->

    </div>
</div>
 
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-8 col-sm-12">
        <h2>Direct Video</h2>

        <div class="hgm-video" data-img-alt="Video Poster Image" data-img="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" data-video-bg-hex="0080FF" data-video-play-bg-hex="000073" data-video-play-bg-alpha="30" data-video-play-icon-hex="D76A00">
            <div class="hgm-video__poster">
                <picture>
                    <source srcset="" media="(min-width: 768px)">
                    <img src="" data-src="" alt="" class="hgm-video__image">
                </picture>
            </div><!-- &__poster -->
            <video class="hgm-video__video" src="" data-src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" controls></video>
        </div><!-- .hgm-video -->

    </div>
</div>
 
/* No context defined. */

Customizaton via Data Attributes

Use data attributes directly on the video component to change the visual behavior; the following data attributes are currently in use:

  • data-img set a custom poster image
  • data-img-alt set a custom poster image alt title
  • data-video-bg-hex set the background color of the video component
  • data-video-play-bg-hex set the background color of the play button (circle)
  • data-video-play-bg-alpha set the alpha transparency of the play button (circle)
  • data-video-play-icon-hex set the color of the play icon (triangle)
  • data-video-caption-bg-hex set the background color of the video caption