WebMD Ignite DX Engine

Video: Caption 

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

        <div class="hgm-video hgm-video--caption">
            <div class="hgm-video__poster">
                <picture>
                    <source srcset="" media="(min-width: 768px)">
                    <img data-src="" src="" alt="" class="hgm-video__image">
                </picture>
            </div><!-- &__poster -->
            <iframe src="" data-src="https://www.youtube.com/embed/YE7VzlLtp-4?modestbranding=1" allowfullscreen="" class="hgm-video__iframe" frameborder="0"></iframe>
            <div class="hgm-video__caption">
                <p>This is an example of a video caption</p>
            </div>
        </div><!-- .hgm-video -->

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

    <div class="hgm-video hgm-video--caption">
      <div class="hgm-video__poster">
        <picture>
          <source srcset="" media="(min-width: 768px)">
          <img data-src="" src="" alt="" class="hgm-video__image">
        </picture>
      </div><!-- &__poster -->
      <iframe src="" data-src="https://www.youtube.com/embed/YE7VzlLtp-4?modestbranding=1" allowfullscreen="" class="hgm-video__iframe" frameborder="0"></iframe>
      <div class="hgm-video__caption">
        <p>This is an example of a video caption</p>
      </div>
    </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