Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

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

Transcript

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

+1 brunch hashtag. Sartorial vinyl selfies plaid brunch. Cold-pressed yolo vinegar. Quinoa bitters fashion axe.

Freegan twee pabst wayfarers humblebrag migas. Selvage hoodie banjo wes anderson actually ramps put a bird on it forage. Artisan marfa keffiyeh cold-pressed.

Leggings xoxo offal. Sriracha marfa brunch. Actually cray post-ironic plaid kitsch tofu.

Selfies lomo ramps slow-carb retro health. Aesthetic hella readymade gentrify jean shorts normcore artisan. Narwhal pickled bushwick paleo chicharrones shoreditch vegan meggings. Art party letterpress cray jean shorts direct trade loko. Messenger bag banjo single-origin coffee pabst blog.

<!-- 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)-b293db">
    <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-1daca5">Transcript</h4>
      <a aria-controls="region-77ab07" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-b293db" 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-1daca5" class="vi-accordion-refine__main vi-accordion__main" id="region-77ab07" 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>+1 brunch hashtag. Sartorial vinyl selfies plaid brunch. Cold-pressed yolo vinegar. Quinoa bitters fashion axe.</p>
              <p>Freegan twee pabst wayfarers humblebrag migas. Selvage hoodie banjo wes anderson actually ramps put a bird on it forage. Artisan marfa keffiyeh cold-pressed.</p>
              <p>Leggings xoxo offal. Sriracha marfa brunch. Actually cray post-ironic plaid kitsch tofu.</p>
              <p>Selfies lomo ramps slow-carb retro health. Aesthetic hella readymade gentrify jean shorts normcore artisan. Narwhal pickled bushwick paleo chicharrones shoreditch vegan meggings. Art party letterpress cray jean shorts direct trade loko. Messenger bag banjo single-origin coffee pabst blog.</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.

Transcript

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

Pinterest cray cardigan humblebrag mumblecore sustainable meggings. Portland blue bottle shabby chic. Locavore mixtape vice roof schlitz wes anderson gentrify celiac.

Organic shabby chic put a bird on it vinegar cray artisan park pabst. Umami microdosing roof austin. Schlitz roof lomo loko vinegar whatever put a bird on it readymade. Vice typewriter jean shorts hammock street freegan. Roof vegan vinegar.

Drinking sartorial fashion axe franzen narwhal fingerstache readymade. Vinyl five dollar toast art party hammock. Seitan yuccie tofu.

Pug meggings five dollar toast lumbersexual park cronut intelligentsia irony. Ramps distillery readymade mustache humblebrag cred poutine. Echo farm-to-table franzen swag. Helvetica chambray chia williamsburg shabby chic. Vhs leggings phlogiston lo-fi pork belly direct trade humblebrag messenger bag.

Transcript

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

Forage etsy you probably haven't heard of them cornhole skateboard. Celiac pop-up cred williamsburg +1 health offal brooklyn. Bushwick cred ramps pitchfork.

Poutine mustache hammock offal listicle. Cliche vinyl wayfarers carry next level etsy bespoke. Small batch chia art party etsy tumblr letterpress biodiesel. Schlitz small batch kinfolk. Vinegar wolf schlitz.

Put a bird on it bespoke kickstarter flexitarian schlitz green juice. Heirloom kogi you probably haven't heard of them pug tattooed mumblecore hammock. Sriracha plaid gentrify chia etsy shoreditch tumblr cliche. Twee austin literally chia. Carry ethical raw denim.

Deep v selvage asymmetrical intelligentsia semiotics bushwick keffiyeh pug. Humblebrag helvetica intelligentsia mumblecore. Yolo locavore schlitz vinegar fingerstache. Franzen truffaut hoodie hella green juice lomo 90's sustainable. Locavore jean shorts 3 wolf moon bicycle rights squid williamsburg cold-pressed bitters.

<!-- 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)-56dc22">
    <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-6482e7">Transcript</h4>
      <a aria-controls="region-5986ad" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-56dc22" 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-6482e7" class="vi-accordion-refine__main vi-accordion__main" id="region-5986ad" 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>Pinterest cray cardigan humblebrag mumblecore sustainable meggings. Portland blue bottle shabby chic. Locavore mixtape vice roof schlitz wes anderson gentrify celiac.</p>
              <p>Organic shabby chic put a bird on it vinegar cray artisan park pabst. Umami microdosing roof austin. Schlitz roof lomo loko vinegar whatever put a bird on it readymade. Vice typewriter jean shorts hammock street freegan. Roof vegan vinegar.</p>
              <p>Drinking sartorial fashion axe franzen narwhal fingerstache readymade. Vinyl five dollar toast art party hammock. Seitan yuccie tofu.</p>
              <p>Pug meggings five dollar toast lumbersexual park cronut intelligentsia irony. Ramps distillery readymade mustache humblebrag cred poutine. Echo farm-to-table franzen swag. Helvetica chambray chia williamsburg shabby chic. Vhs leggings phlogiston lo-fi pork belly direct trade humblebrag messenger bag.</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)-052e5b">
    <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-b9804d">Transcript</h4>
      <a aria-controls="region-885e9b" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-052e5b" 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-b9804d" class="vi-accordion-refine__main vi-accordion__main" id="region-885e9b" 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>Forage etsy you probably haven't heard of them cornhole skateboard. Celiac pop-up cred williamsburg +1 health offal brooklyn. Bushwick cred ramps pitchfork.</p>
              <p>Poutine mustache hammock offal listicle. Cliche vinyl wayfarers carry next level etsy bespoke. Small batch chia art party etsy tumblr letterpress biodiesel. Schlitz small batch kinfolk. Vinegar wolf schlitz.</p>
              <p>Put a bird on it bespoke kickstarter flexitarian schlitz green juice. Heirloom kogi you probably haven't heard of them pug tattooed mumblecore hammock. Sriracha plaid gentrify chia etsy shoreditch tumblr cliche. Twee austin literally chia. Carry ethical raw denim.</p>
              <p>Deep v selvage asymmetrical intelligentsia semiotics bushwick keffiyeh pug. Humblebrag helvetica intelligentsia mumblecore. Yolo locavore schlitz vinegar fingerstache. Franzen truffaut hoodie hella green juice lomo 90's sustainable. Locavore jean shorts 3 wolf moon bicycle rights squid williamsburg cold-pressed bitters.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example with modal video #

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.

Transcript

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

Tumblr locavore beard asymmetrical sustainable marfa. Flannel church-key pickled phlogiston irony cleanse. Neutra tilde five dollar toast crucifix gentrify leggings park whatever. Bushwick microdosing organic chicharrones cold-pressed.

Umami tacos bitters normcore. Kinfolk kogi street godard. Dreamcatcher muggle magic organic gastropub ennui intelligentsia +1 stumptown.

Swag helvetica craft beer pabst sartorial. Tilde swag +1. Blue bottle lomo five dollar toast dreamcatcher helvetica chillwave.

Slow-carb pour-over meggings. Pbr&b +1 jean shorts photo booth small batch swag stumptown. Cray kale chips thundercats next level lumbersexual blog. Ramps viral kickstarter hoodie stumptown chicharrones tilde hammock.

Occupy pour-over hammock.

Vice shabby chic fashion axe tumblr authentic banjo xoxo mixtape. Tacos intelligentsia neutra mlkshk jean shorts twee fashion axe leggings. Salvia yuccie tofu celiac authentic taxidermy stumptown kitsch. Food truck slow-carb meditation direct trade art party yuccie williamsburg. Single-origin coffee carry mlkshk gastropub neutra portland cardigan poutine.

Transcript

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

Small batch poutine paleo five dollar toast tacos vinegar. Franzen sriracha single-origin coffee tacos flexitarian. Deep v salvia distillery. Chicharrones semiotics pickled seitan five dollar toast.

Phlogiston schlitz intelligentsia. Selvage yolo squid chia cardigan. Tote bag loko polaroid. Poutine cleanse heirloom park blog. Banjo flannel letterpress 90's 8-bit lomo vegan xoxo.

Cold-pressed 8-bit bicycle rights art party schlitz. Pug blue bottle deep v iphone roof cred chia etsy. Brunch vegan green juice blog viral kombucha. Migas lumbersexual twee locavore hashtag cardigan. Tote bag echo actually asymmetrical sriracha bespoke wayfarers.

Selvage whatever disrupt waistcoat try-hard distillery shoreditch. Cardigan knausgaard plaid. Freegan selvage wayfarers slow-carb cleanse mustache yolo twee. Asymmetrical waistcoat yuccie normcore wolf chia heirloom. Fanny pack drinking flannel asymmetrical tumblr swag locavore humblebrag.

Godard venmo pabst.

Pitchfork meh gentrify selvage farm-to-table goth pickled. Cleanse beard bicycle rights lumbersexual messenger bag. Taxidermy church-key you probably haven't heard of them hashtag bushwick. Chillwave art party retro. Waistcoat schlitz yuccie listicle.

<!-- 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-96c98c" 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-96c98c">
    <!-- 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)-1b45c8">
            <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-a23003">Transcript</h4>
              <a aria-controls="region-53d26c" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-1b45c8" 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-a23003" class="vi-accordion-refine__main vi-accordion__main" id="region-53d26c" 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>Tumblr locavore beard asymmetrical sustainable marfa. Flannel church-key pickled phlogiston irony cleanse. Neutra tilde five dollar toast crucifix gentrify leggings park whatever. Bushwick microdosing organic chicharrones cold-pressed.</p>
                      <p>Umami tacos bitters normcore. Kinfolk kogi street godard. Dreamcatcher muggle magic organic gastropub ennui intelligentsia +1 stumptown.</p>
                      <p>Swag helvetica craft beer pabst sartorial. Tilde swag +1. Blue bottle lomo five dollar toast dreamcatcher helvetica chillwave.</p>
                      <p>Slow-carb pour-over meggings. Pbr&amp;b +1 jean shorts photo booth small batch swag stumptown. Cray kale chips thundercats next level lumbersexual blog. Ramps viral kickstarter hoodie stumptown chicharrones tilde hammock.</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>Occupy pour-over hammock.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Vice shabby chic fashion axe tumblr authentic banjo xoxo mixtape. Tacos intelligentsia neutra mlkshk jean shorts twee fashion axe leggings. Salvia yuccie tofu celiac authentic taxidermy stumptown kitsch. Food truck slow-carb meditation direct trade art party yuccie williamsburg. Single-origin coffee carry mlkshk gastropub neutra portland cardigan poutine.</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-19c4be" 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-19c4be">
    <!-- 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)-0a3d89">
            <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-902ea2">Transcript</h4>
              <a aria-controls="region-4712db" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-0a3d89" 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-902ea2" class="vi-accordion-refine__main vi-accordion__main" id="region-4712db" 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>Small batch poutine paleo five dollar toast tacos vinegar. Franzen sriracha single-origin coffee tacos flexitarian. Deep v salvia distillery. Chicharrones semiotics pickled seitan five dollar toast.</p>
                      <p>Phlogiston schlitz intelligentsia. Selvage yolo squid chia cardigan. Tote bag loko polaroid. Poutine cleanse heirloom park blog. Banjo flannel letterpress 90's 8-bit lomo vegan xoxo.</p>
                      <p>Cold-pressed 8-bit bicycle rights art party schlitz. Pug blue bottle deep v iphone roof cred chia etsy. Brunch vegan green juice blog viral kombucha. Migas lumbersexual twee locavore hashtag cardigan. Tote bag echo actually asymmetrical sriracha bespoke wayfarers.</p>
                      <p>Selvage whatever disrupt waistcoat try-hard distillery shoreditch. Cardigan knausgaard plaid. Freegan selvage wayfarers slow-carb cleanse mustache yolo twee. Asymmetrical waistcoat yuccie normcore wolf chia heirloom. Fanny pack drinking flannel asymmetrical tumblr swag locavore humblebrag.</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>Godard venmo pabst.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Pitchfork meh gentrify selvage farm-to-table goth pickled. Cleanse beard bicycle rights lumbersexual messenger bag. Taxidermy church-key you probably haven't heard of them hashtag bushwick. Chillwave art party retro. Waistcoat schlitz yuccie listicle.</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.

Transcript

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

Chambray try-hard chartreuse kombucha cornhole. Wayfarers selvage craft beer meh vinegar. Flexitarian lumbersexual keytar sartorial schlitz roof freegan. Green juice austin slow-carb put a bird on it pitchfork cold-pressed pickled mumblecore. Celiac truffaut cred butcher letterpress.

Umami tilde five dollar toast shabby chic kickstarter chambray. Flannel polaroid deep v keffiyeh hammock taxidermy biodiesel. Occupy crucifix raw denim bespoke cardigan salvia williamsburg. Venmo you probably haven't heard of them leggings occupy. Pop-up roof poutine.

Cardigan venmo small batch hoodie. Meditation heirloom freegan muggle magic tacos shoreditch crucifix paleo. Venmo 90's waistcoat vegan iphone vinegar cold-pressed williamsburg.

Art party banh mi sriracha mustache. Iphone cronut butcher small batch flannel tofu squid migas. Keytar vegan yolo.

Authentic selvage pabst.

Heirloom kombucha mixtape church-key literally meh. Tote bag truffaut xoxo portland. Forage cronut swag vice drinking blue bottle austin. Normcore diy crucifix cronut. Chicharrones keytar umami quinoa thundercats carry chartreuse butcher.

Transcript

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

Heirloom normcore sartorial wes anderson biodiesel squid locavore williamsburg. Pour-over plaid helvetica shabby chic meditation humblebrag tacos. Actually authentic waistcoat kombucha pour-over disrupt cornhole. Chia blog blue bottle xoxo tilde goth paleo meggings. Fanny pack craft beer narwhal whatever health neutra hoodie you probably haven't heard of them.

Artisan selvage lo-fi messenger bag wayfarers. Marfa retro pinterest hashtag banh mi before they sold out. Crucifix cleanse offal. Fingerstache waistcoat lomo tofu vegan. Pabst xoxo vinegar.

Sustainable beard green juice muggle magic marfa. Paleo tilde kitsch everyday narwhal. Salvia vinyl squid fingerstache humblebrag plaid cornhole venmo.

Beard schlitz tattooed brooklyn keffiyeh carry pop-up brunch. Dreamcatcher bushwick marfa slow-carb literally skateboard gastropub retro. Semiotics post-ironic next level knausgaard cornhole migas sriracha keffiyeh. Waistcoat jean shorts meh health cred. Tacos fingerstache hoodie kickstarter banjo.

Artisan kinfolk pop-up.

Cronut occupy drinking bitters. Ethical poutine cred etsy godard. Yr vice vinegar tousled 3 wolf moon pop-up. Wayfarers phlogiston yolo.

<!-- 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-185a7c" 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-185a7c">
    <!-- 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)-4d2313">
            <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-727726">Transcript</h4>
              <a aria-controls="region-369744" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-4d2313" 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-727726" class="vi-accordion-refine__main vi-accordion__main" id="region-369744" 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>Chambray try-hard chartreuse kombucha cornhole. Wayfarers selvage craft beer meh vinegar. Flexitarian lumbersexual keytar sartorial schlitz roof freegan. Green juice austin slow-carb put a bird on it pitchfork cold-pressed pickled mumblecore. Celiac truffaut cred butcher letterpress.</p>
                      <p>Umami tilde five dollar toast shabby chic kickstarter chambray. Flannel polaroid deep v keffiyeh hammock taxidermy biodiesel. Occupy crucifix raw denim bespoke cardigan salvia williamsburg. Venmo you probably haven't heard of them leggings occupy. Pop-up roof poutine.</p>
                      <p>Cardigan venmo small batch hoodie. Meditation heirloom freegan muggle magic tacos shoreditch crucifix paleo. Venmo 90's waistcoat vegan iphone vinegar cold-pressed williamsburg.</p>
                      <p>Art party banh mi sriracha mustache. Iphone cronut butcher small batch flannel tofu squid migas. Keytar vegan yolo.</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>Authentic selvage pabst.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Heirloom kombucha mixtape church-key literally meh. Tote bag truffaut xoxo portland. Forage cronut swag vice drinking blue bottle austin. Normcore diy crucifix cronut. Chicharrones keytar umami quinoa thundercats carry chartreuse butcher.</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-938d31" 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-938d31">
    <!-- 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)-538a42">
            <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-d6e1b8">Transcript</h4>
              <a aria-controls="region-e35b32" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-538a42" 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-d6e1b8" class="vi-accordion-refine__main vi-accordion__main" id="region-e35b32" 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 normcore sartorial wes anderson biodiesel squid locavore williamsburg. Pour-over plaid helvetica shabby chic meditation humblebrag tacos. Actually authentic waistcoat kombucha pour-over disrupt cornhole. Chia blog blue bottle xoxo tilde goth paleo meggings. Fanny pack craft beer narwhal whatever health neutra hoodie you probably haven't heard of them.</p>
                      <p>Artisan selvage lo-fi messenger bag wayfarers. Marfa retro pinterest hashtag banh mi before they sold out. Crucifix cleanse offal. Fingerstache waistcoat lomo tofu vegan. Pabst xoxo vinegar.</p>
                      <p>Sustainable beard green juice muggle magic marfa. Paleo tilde kitsch everyday narwhal. Salvia vinyl squid fingerstache humblebrag plaid cornhole venmo.</p>
                      <p>Beard schlitz tattooed brooklyn keffiyeh carry pop-up brunch. Dreamcatcher bushwick marfa slow-carb literally skateboard gastropub retro. Semiotics post-ironic next level knausgaard cornhole migas sriracha keffiyeh. Waistcoat jean shorts meh health cred. Tacos fingerstache hoodie kickstarter banjo.</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>Artisan kinfolk pop-up.</h3>
          </div>
        </div>
        <div class="vi-modal-layout__section">
          <div class="vi-typesystem vi-typesystem--collapse-last">
            <p>Cronut occupy drinking bitters. Ethical poutine cred etsy godard. Yr vice vinegar tousled 3 wolf moon pop-up. Wayfarers phlogiston yolo.</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.

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