Embed Lazy Loader

Default

  • javascript

The EmbedLazyLoader allows you to defer loading of resource intensive embeds and other content.

It is composed of a loading indicator, a preview, and the deferreded content. When a visitor clicks the preview, the deferred content is then loaded.

You can also load and unload that content programatically using the load() and unload() functions returned after initializing this component.

It works well with the Video Thumbnail and Flex Loader compositions but you can substitute other markup for the loading indicator and preview.

When using it to lazy load a YouTube embed, be sure to include the allow and allowfullscreen attributes shown in the example below, to ensure a consistent cross-browser experience.

A video thumbnail showing a set of generators in the driveway of a house
Play Video 
<div class="FlexEmbed  js-EmbedLazyLoader">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>

  <div class="FlexEmbed-content u-bgBlack u-textSilver">
    <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" class="u-spin FlexEmbed-icon">
      <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z" />
    </svg>

  </div>

  <a
        href="https://www.youtube.com/watch?v&#x3D;fX9kvnOhhAk"
        class="js-EmbedLazyLoader-preview">

        <img class="FlexEmbed-content"
            src="/images/prototypes/tcs/GeneratorFamily.jpg"
            alt="A video thumbnail showing a set of generators in the driveway of a house">
      
        <div class="FlexEmbed-content FlexEmbed-content--overlay">
          <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon FlexEmbed-icon--interactive">
        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
      </svg>
      
            <span class="u-hiddenVisually">Play Video</span>
        </div>
      </a>

  <div class="js-EmbedLazyLoader-content" hidden data-embed-code='
            <iframe
              class="FlexEmbed-content"
              src="https://www.youtube.com/embed/fX9kvnOhhAk?autoplay&#x3D;1&amp;enablejsapi&#x3D;1
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            ></iframe>
        '></div>
</div>