Video - Transcript

v0.0.0

When there is a transcript of the video, it can be displayed under the video.

The element showing the transcript is a combination of the following:

an Accordion of type refine with modifier --transcript
a Scrollpane with color modifier --accent-1 and --refine
a div with utility class .pr-20 wrapping the content (use .pl-20 when direction is right-to-left)

Automatic text highlighting is not implemented, but when text needs highlighting use a <span>-tag with utility classes .bg-accent-2 and .text-white

Qui deserunt autem sed doloremque reprehenderit rem natus dolor eos exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.

Bicycle rights ethical artisan taxidermy banjo lumbersexual. Humblebrag 8-bit butcher celiac mustache before they sold out. Chartreuse hoodie direct trade mixtape single-origin coffee.

Mlkshk roof pop-up chia. Godard food truck seitan pug viral. Gluten-free flannel thundercats asymmetrical retro cleanse try-hard.

Pabst kitsch blue bottle locavore slow-carb seitan taxidermy. Tote bag muggle magic butcher heirloom neutra. You probably haven't heard of them kombucha chia selfies farm-to-table art party. Letterpress paleo readymade williamsburg 8-bit tacos food truck.

Cornhole carry flexitarian salvia selfies chia. Yolo selfies diy raw denim stumptown phlogiston chicharrones slow-carb. Mlkshk mumblecore vinegar lumbersexual banjo cronut scenester cold-pressed.

<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-0381a4">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-a1aed5">Transcript</h4>
      <a aria-controls="region-d3d565" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-0381a4" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Transcript</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-a1aed5" class="vi-accordion-refine__main vi-accordion__main" id="region-d3d565" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <!-- Scrollpane (mods: --accent-1, --refine) -->
        <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
          <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
            <div class="pr-20">
              <p>
                <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                reprehenderit rem natus dolor eos
                exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
              </p>
              <p>Bicycle rights ethical artisan taxidermy banjo lumbersexual. Humblebrag 8-bit butcher celiac mustache before they sold out. Chartreuse hoodie direct trade mixtape single-origin coffee.</p>
              <p>Mlkshk roof pop-up chia. Godard food truck seitan pug viral. Gluten-free flannel thundercats asymmetrical retro cleanse try-hard.</p>
              <p>Pabst kitsch blue bottle locavore slow-carb seitan taxidermy. Tote bag muggle magic butcher heirloom neutra. You probably haven't heard of them kombucha chia selfies farm-to-table art party. Letterpress paleo readymade williamsburg 8-bit tacos food truck.</p>
              <p>Cornhole carry flexitarian salvia selfies chia. Yolo selfies diy raw denim stumptown phlogiston chicharrones slow-carb. Mlkshk mumblecore vinegar lumbersexual banjo cronut scenester cold-pressed.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example with inline video #

Add the transcript accordion right after the inline video in the same parent element.

Qui deserunt autem sed doloremque reprehenderit rem natus dolor eos exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.

Swag food truck cliche vice gluten-free. Phlogiston cray messenger bag echo offal sriracha muggle magic you probably haven't heard of them. Dreamcatcher keffiyeh seitan synth. Raw denim sartorial keffiyeh blog direct trade aesthetic bitters typewriter.

Bushwick helvetica polaroid wes anderson offal. Pug dreamcatcher normcore keytar. Everyday craft beer park. Occupy messenger bag artisan crucifix deep v. Pug retro normcore ennui typewriter mixtape small batch.

Forage listicle carry cleanse single-origin coffee blog. Chicharrones biodiesel mumblecore neutra roof vhs bushwick. Tilde vegan bushwick intelligentsia microdosing pitchfork fanny pack.

Scenester meggings keffiyeh typewriter butcher. Pabst gluten-free marfa sriracha. Banjo jean shorts slow-carb whatever muggle magic flannel church-key.

Qui deserunt autem sed doloremque reprehenderit rem natus dolor eos exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.

Messenger bag vinyl actually gluten-free ramps. Chartreuse freegan kogi. Chartreuse messenger bag try-hard pabst. Mumblecore readymade pinterest pour-over ramps vhs. Vinegar gentrify xoxo biodiesel.

8-bit pop-up ugh normcore skateboard quinoa poutine 3 wolf moon. Wayfarers distillery keytar five dollar toast chartreuse. Sriracha meditation helvetica.

Irony paleo 3 wolf moon single-origin coffee vinyl chia. Truffaut celiac mumblecore vhs freegan cliche disrupt shoreditch. Chartreuse etsy vegan photo booth bicycle rights salvia. Keffiyeh photo booth ennui next level muggle magic umami kinfolk.

Shoreditch marfa pug. Cred freegan typewriter crucifix lo-fi. Dreamcatcher iphone keffiyeh occupy fixie cardigan. Tousled tattooed shoreditch squid kitsch mustache.

<!-- Video  -->
<div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-player-mode="inline" data-video-id="PiVcDIRF3V4" data-video-provider="youtube" role="button" tabindex="0">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__poster"></div>
  </div>
</div>
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-3b49b9">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-124a12">Transcript</h4>
      <a aria-controls="region-33a242" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-3b49b9" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Transcript</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-124a12" class="vi-accordion-refine__main vi-accordion__main" id="region-33a242" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <!-- Scrollpane (mods: --accent-1, --refine) -->
        <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
          <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
            <div class="pr-20">
              <p>
                <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                reprehenderit rem natus dolor eos
                exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
              </p>
              <p>Swag food truck cliche vice gluten-free. Phlogiston cray messenger bag echo offal sriracha muggle magic you probably haven't heard of them. Dreamcatcher keffiyeh seitan synth. Raw denim sartorial keffiyeh blog direct trade aesthetic bitters typewriter.</p>
              <p>Bushwick helvetica polaroid wes anderson offal. Pug dreamcatcher normcore keytar. Everyday craft beer park. Occupy messenger bag artisan crucifix deep v. Pug retro normcore ennui typewriter mixtape small batch.</p>
              <p>Forage listicle carry cleanse single-origin coffee blog. Chicharrones biodiesel mumblecore neutra roof vhs bushwick. Tilde vegan bushwick intelligentsia microdosing pitchfork fanny pack.</p>
              <p>Scenester meggings keffiyeh typewriter butcher. Pabst gluten-free marfa sriracha. Banjo jean shorts slow-carb whatever muggle magic flannel church-key.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-player-mode="inline" data-video-id="65107797" data-video-provider="vimeo" role="button" tabindex="0">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__poster"></div>
  </div>
</div>
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-303199">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-1ec158">Transcript</h4>
      <a aria-controls="region-8758ea" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-303199" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Transcript</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-1ec158" class="vi-accordion-refine__main vi-accordion__main" id="region-8758ea" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <!-- Scrollpane (mods: --accent-1, --refine) -->
        <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
          <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
            <div class="pr-20">
              <p>
                <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                reprehenderit rem natus dolor eos
                exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
              </p>
              <p>Messenger bag vinyl actually gluten-free ramps. Chartreuse freegan kogi. Chartreuse messenger bag try-hard pabst. Mumblecore readymade pinterest pour-over ramps vhs. Vinegar gentrify xoxo biodiesel.</p>
              <p>8-bit pop-up ugh normcore skateboard quinoa poutine 3 wolf moon. Wayfarers distillery keytar five dollar toast chartreuse. Sriracha meditation helvetica.</p>
              <p>Irony paleo 3 wolf moon single-origin coffee vinyl chia. Truffaut celiac mumblecore vhs freegan cliche disrupt shoreditch. Chartreuse etsy vegan photo booth bicycle rights salvia. Keffiyeh photo booth ennui next level muggle magic umami kinfolk.</p>
              <p>Shoreditch marfa pug. Cred freegan typewriter crucifix lo-fi. Dreamcatcher iphone keffiyeh occupy fixie cardigan. Tousled tattooed shoreditch squid kitsch mustache.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

To add the transcript to a modal video, we use a hidden Modal Layout (with modifier --visual) somewhere on the page.

The data-video-description-id must correspond with the id of the Modal Layout, or in this case the element containing the multiple Modal Layouts. The example shows a transcript and a description.

<!-- Video  -->
<div class="vi-video" data-aria-label="Open and play the video in a dialog window." data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-player-mode="modal" data-video-description-id="sg-0d4d22" data-video-id="PiVcDIRF3V4" data-video-modal-close-button-label="Video modal dialog, click to close, or navigate to the video clip playing." data-video-provider="youtube" role="button" tabindex="0">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__poster"></div>
  </div>
</div>
<!-- .d-none is Bootstrap display none class -->
<div class="d-none">
  <div id="sg-0d4d22">
    <!-- Modal Layout (mods: --visual) -->
    <div class="vi-modal-layout vi-modal-layout--visual">
      <div class="vi-modal-layout__body">
        <!-- Accordion type: refine -->
        <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
          <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-24e8a3">
            <div class="vi-accordion-refine__header vi-accordion__header">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-a5606c">Transcript</h4>
              <a aria-controls="region-521152" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-24e8a3" role="button">
                <!-- Button type: generic  -->
                <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                    Transcript</span></div>
              </a>
            </div>
            <div aria-labelledby="heading-a5606c" class="vi-accordion-refine__main vi-accordion__main" id="region-521152" role="region">
              <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
                <!-- Scrollpane (mods: --accent-1, --refine) -->
                <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                  <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                    <div class="pr-20">
                      <p>
                        <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                        reprehenderit rem natus dolor eos
                        exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                      </p>
                      <p>Heirloom schlitz narwhal polaroid roof twee before they sold out everyday. Drinking tofu raw denim pabst. Tacos cleanse loko health whatever chambray. Echo ennui kinfolk trust fund hella pug ethical fanny pack.</p>
                      <p>Craft beer five dollar toast pour-over sriracha gentrify mixtape messenger bag. Offal sriracha slow-carb narwhal. Ramps green juice intelligentsia.</p>
                      <p>Fingerstache goth ethical. Asymmetrical portland butcher mumblecore dreamcatcher tumblr authentic ugh. Cleanse offal quinoa. Meggings lomo retro. Fanny pack mlkshk echo crucifix.</p>
                      <p>Quinoa banh mi literally austin thundercats small batch vinegar. 8-bit synth irony blog chambray whatever celiac pbr&amp;b. Master asymmetrical chambray. Pork belly fingerstache sriracha thundercats echo. Pinterest knausgaard artisan heirloom ennui tumblr quinoa venmo.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Layout  -->
    <div class="vi-modal-layout">
      <div class="vi-modal-layout__body">
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem">
            <h3>Banjo yuccie post-ironic.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Distillery lomo celiac single-origin coffee. Normcore jean shorts poutine try-hard xoxo. Taxidermy readymade wolf xoxo next level lo-fi austin.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<!-- Video  -->
<div class="vi-video" data-aria-label="Open and play the video in a dialog window." data-player-mode="modal" data-video-description-id="sg-d54b30" data-video-id="65107797" data-video-modal-close-button-label="Video modal dialog, click to close, or navigate to the video clip playing." data-video-provider="vimeo" role="button" tabindex="0">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video">
    <div class="vi-video__poster"></div>
  </div>
</div>
<!-- .d-none is Bootstrap display none class -->
<div class="d-none">
  <div id="sg-d54b30">
    <!-- Modal Layout (mods: --visual) -->
    <div class="vi-modal-layout vi-modal-layout--visual">
      <div class="vi-modal-layout__body">
        <!-- Accordion type: refine -->
        <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
          <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-086c58">
            <div class="vi-accordion-refine__header vi-accordion__header">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-97dbaa">Transcript</h4>
              <a aria-controls="region-d789b1" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-086c58" role="button">
                <!-- Button type: generic  -->
                <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                    Transcript</span></div>
              </a>
            </div>
            <div aria-labelledby="heading-97dbaa" class="vi-accordion-refine__main vi-accordion__main" id="region-d789b1" role="region">
              <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
                <!-- Scrollpane (mods: --accent-1, --refine) -->
                <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                  <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                    <div class="pr-20">
                      <p>
                        <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                        reprehenderit rem natus dolor eos
                        exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                      </p>
                      <p>Master plaid tousled 90's small batch synth. Vhs tumblr kale chips bushwick. Paleo actually small batch flexitarian knausgaard pinterest schlitz. Pickled mustache keffiyeh lumbersexual microdosing. Raw denim muggle magic try-hard kombucha fanny pack.</p>
                      <p>Direct trade lo-fi ennui diy umami tacos. Hashtag goth echo letterpress 3 wolf moon. Deep v ramps hella. Listicle mustache fixie banjo.</p>
                      <p>Loko chambray pop-up biodiesel semiotics pbr&amp;b pork belly. Pug health williamsburg farm-to-table raw denim helvetica gentrify street. Scenester normcore banh mi. Venmo bespoke kogi.</p>
                      <p>Vinegar fixie semiotics tofu. Skateboard poutine disrupt. Diy fixie tattooed tumblr kickstarter pitchfork chambray. Leggings literally salvia blue bottle. Ugh you probably haven't heard of them locavore chambray polaroid authentic selvage dreamcatcher.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Layout  -->
    <div class="vi-modal-layout">
      <div class="vi-modal-layout__body">
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem">
            <h3>Meh health wolf.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Forage kogi meggings put a bird on it street pitchfork skateboard wayfarers. Heirloom tilde vegan ennui. Twee post-ironic green juice.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example with video button #

The data-video-description-id must correspond with the id of the Modal Layout, or in this case the element containing the multiple Modal Layouts. The example shows a transcript and a description.

<!-- Button type: solid  -->
<button aria-label="Open and play the video in a dialog window." data-video-id="PiVcDIRF3V4" data-video-provider="youtube" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-modal-close-button-label="Video modal dialog, click to close, or navigate to the video clip playing." data-video-description-id="sg-2ba4ec" data-video-title="Custom modal title above the video" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">YouTube
  <!-- Icon video-play (mods: --button-end) -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<!-- .d-none is Bootstrap display none class -->
<div class="d-none">
  <div id="sg-2ba4ec">
    <!-- Modal Layout (mods: --visual) -->
    <div class="vi-modal-layout vi-modal-layout--visual">
      <div class="vi-modal-layout__body">
        <!-- Accordion type: refine -->
        <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
          <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-a3c76c">
            <div class="vi-accordion-refine__header vi-accordion__header">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-3267be">Transcript</h4>
              <a aria-controls="region-91aa1a" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-a3c76c" role="button">
                <!-- Button type: generic  -->
                <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                    Transcript</span></div>
              </a>
            </div>
            <div aria-labelledby="heading-3267be" class="vi-accordion-refine__main vi-accordion__main" id="region-91aa1a" role="region">
              <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
                <!-- Scrollpane (mods: --accent-1, --refine) -->
                <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                  <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                    <div class="pr-20">
                      <p>
                        <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                        reprehenderit rem natus dolor eos
                        exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                      </p>
                      <p>Selvage pabst put a bird on it tilde marfa microdosing. Letterpress yolo meggings trust fund banjo vegan 3 wolf moon blue bottle. Godard chia gluten-free letterpress. Truffaut migas tacos.</p>
                      <p>Vinyl keffiyeh shabby chic swag. Kitsch migas 8-bit lomo celiac dreamcatcher locavore pabst. Brunch schlitz deep v iphone gentrify diy.</p>
                      <p>Fashion axe gluten-free swag humblebrag flexitarian lumbersexual. Chicharrones stumptown kogi. Vinyl artisan intelligentsia. Cornhole seitan 8-bit etsy bushwick. Narwhal tofu vice fashion axe post-ironic ennui tilde.</p>
                      <p>Small batch typewriter 8-bit. Sustainable twee cleanse. Raw denim meditation authentic. Try-hard twee iphone.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Layout  -->
    <div class="vi-modal-layout">
      <div class="vi-modal-layout__body">
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem">
            <h3>Echo pop-up kickstarter.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Artisan truffaut drinking master health brunch godard. Portland selfies iphone pbr&amp;b neutra humblebrag lomo mlkshk. Franzen tofu schlitz flannel muggle magic vinyl meditation knausgaard. Humblebrag migas jean shorts plaid literally scenester gastropub. Meditation pitchfork portland selfies everyday narwhal.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Button type: solid  -->
<button aria-label="Open and play the video in a dialog window." data-video-id="334092219" data-video-provider="vimeo" data-video-modal-close-button-label="Video modal dialog, click to close, or navigate to the video clip playing." data-video-description-id="sg-e73994" data-video-title="Custom modal title above the video" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">Vimeo
  <!-- Icon video-play (mods: --button-end) -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<!-- .d-none is Bootstrap display none class -->
<div class="d-none">
  <div id="sg-e73994">
    <!-- Modal Layout (mods: --visual) -->
    <div class="vi-modal-layout vi-modal-layout--visual">
      <div class="vi-modal-layout__body">
        <!-- Accordion type: refine -->
        <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
          <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-8b5739">
            <div class="vi-accordion-refine__header vi-accordion__header">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-66365d">Transcript</h4>
              <a aria-controls="region-857394" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-8b5739" role="button">
                <!-- Button type: generic  -->
                <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                    Transcript</span></div>
              </a>
            </div>
            <div aria-labelledby="heading-66365d" class="vi-accordion-refine__main vi-accordion__main" id="region-857394" role="region">
              <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
                <!-- Scrollpane (mods: --accent-1, --refine) -->
                <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                  <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                    <div class="pr-20">
                      <p>
                        <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                        reprehenderit rem natus dolor eos
                        exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                      </p>
                      <p>Chartreuse art party kickstarter semiotics knausgaard. Gluten-free cliche mumblecore sustainable. Leggings art party cornhole.</p>
                      <p>Umami sartorial trust fund polaroid butcher flannel salvia. Kombucha pop-up echo normcore. Stumptown hella lo-fi occupy diy typewriter. Quinoa deep v paleo actually raw denim locavore.</p>
                      <p>Stumptown hammock trust fund shoreditch semiotics letterpress leggings kitsch. Ethical put a bird on it venmo freegan narwhal asymmetrical everyday tattooed. Church-key typewriter flannel tumblr actually scenester. Pork belly art party listicle.</p>
                      <p>Locavore tumblr fingerstache cred truffaut letterpress tofu lomo. Mlkshk pork belly waistcoat irony shoreditch brunch butcher. 8-bit try-hard brunch aesthetic.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Layout  -->
    <div class="vi-modal-layout">
      <div class="vi-modal-layout__body">
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem">
            <h3>Sriracha etsy godard.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Jean shorts kale chips taxidermy chillwave pitchfork bespoke. Keffiyeh put a bird on it wayfarers slow-carb drinking. Blog quinoa messenger bag godard kickstarter meditation marfa phlogiston.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  13 Aug 2025 - fix(video): fix inline video scroll offset calculation
  10 Juni 2024 - Use youtube-nocookie.com for youtube videos.
  04 Juli 2022 - Transcript default is ‘open’
  A11y add enter/space to trigger video.
  Try to autoplay lazy-loaded videos (only works when browser allows it)
  Update javascript to push custom message to GTM dataLayer.
  PBS support tweak to better support biosimilars theme
  Pause on audio play
  Update to new Vimeo oEmbed API
  A modifier class --modal used by js was renamed --button. Make sure that js AND css are updated.
  Refactor Mode: Background
  Refactor Mode: Button
  Print: css adjustments
  Pause autoplay when playing video in slider.
  Override onYouTubeIframeAPIReady when defined to prevent conflict with googletagmanager. Also works in IE11
  Accessibility: return focus on initiating element.
  Accessibility: added data-attribute data-video-modal-close-button-label to set the aria-label of the close button. Contents of button changed to X because we use an aria-label.
  Accessibility: Video, add role and aria-label to video component.
  Switch between ‘inline’ and ‘modal’ mode from 768px to 960px.


Fix

  11 Nov 2024 - fix(video): call to undefined modal
  14 May 2024 - Fix for lazy loaded videos playing after closing modals before video load.
  13 Sep 2023 - Try to fix unreproducable pause bug in video collection.
  11 Aug 2022 - Fix transcript content padding in documentation.
  12 Juli 2022 - Trigger dom change after cloning description.
  28 June 2022 - Fix scrollparent detector
  Youtube background shows as 1px black line when video mode background
  Fix rounding issue artificial object fit.
  Fix autoplay lazy-loaded videos: hybrid mode should not autoplay when vendor embed is displayed (small screens).
  Background Video GTM dataLayer error.
  Stop Video Component correctly when modal is closed.
  Scroll issue in inline mode.
  YT Inline mode not playing in place on iOS.
  Fix the handling of ‘external’ clicks towards cloned elements in slider.
  Temporary Fix ‘Vimeo makes incorrect jsonp callback’ when the name of the callback starts with ‘jQuery’ (!?)
  Slider change interference causing video pause.
  Do not require youtube key for vimeo videos.
  Object fit calculation not always correct.
  Background mode creates modal on incoming links.


Added

  20 June 2022 - Documentation on the use of Transcripts
  Optional data-video-poster option, to disable the poster image on a background video.
  Add data-player-mode="button" to allow button mode on any link or button element.
  Optional data-video-lazy option, to lazy load vendor player.
  PBS support
  Mode: Inline
  Mode: Modal
  Add data attribute data-video-description-id to point to description. Works for Video as wel as for Video Button
  Video Button with documentation.
  Background video examples
  Initial draft

Video - Transcript

Transcript

Example with inline video #

Transcript

Transcript

Example with modal video #

Transcript

Banjo yuccie post-ironic.

Transcript

Meh health wolf.

Example with video button #

Transcript

Echo pop-up kickstarter.

Transcript

Sriracha etsy godard.

Stylesheets #

JavaScript #

Usage documentation #

Changelog #

Changelog

Changed

Fix

Added