WebMD Ignite DX Engine

Video: Youtube 

<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">
            <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><!-- .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">
            <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><!-- .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