Skip to main content

Video Gallery

    Video Gallery

    Video Gallery description

    Links:

    Demo Page

    By default, videos are displayed 16:9 and at the width of its container.

    <div class="c-video-player">
      <figure class="c-video-player__figure">
        <div class="c-video-player__ar o-ar o-ar--16:9">
          <div class="c-video-player__container" data-video-type="youtube" data-video-id="NmtGKer20aY"></div>
        </div>
    
        <div class="c-video-player__description u-d-flex u-f-justify-end">
          <!-- Optional caption -->
          <!-- Optional transcript link-->
          <div class="c-video-player__transcript u-m-t-sm">
            <a href="#" class="c-video-player__transcript-link subtle-link">
              <span class="o-svg-icon o-svg-icon">
                <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                    <path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
              </span>
              Transcript
            </a>
          </div>
        </div>
    
      </figure>
    </div>
    

    Control the width of the video on full width pages by placing the video in a grid and adjusting the grid-item size and breakpoint.

    Some descriptive text lorem ipsum doler sit amet.

    <div class="o-grid u-f-justify-center">
      <!-- Set grid-item size and breakpoint as necessary -->
      <div class="o-grid__item-8@lg">
        <div class="c-video-player">
          <figure class="c-video-player__figure">
            <div class="c-video-player__ar o-ar o-ar--16:9">
              <!-- Add title of video to aria-label if there is a poster image -->
              <div role="button" class="c-video-player__poster o-ar__item"
                aria-label="Play video Unmasking a Killer"
                style="background-image: url(/images/placeholder/video-poster-youtube.png);"
                tabindex="0"
              >
                <div class="c-video-player__poster--btn u-d-flex u-f-align-center u-f-justify-center">
                  <div class="u-text-small u-c-red u-text-bold">
                    <span class="o-svg-icon o-svg-icon--xl">
                      <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                          <path d="M456.4 214.7L104.4 6.6C75.8-10.3 32 6.1 32 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zm-16.2 55.1l-352 208C77.6 483.9 64 476.6 64 464V47.9c0-16.3 16.4-18.4 24.1-13.8l352 208.1c10.5 6.2 10.5 21.4.1 27.6z" fill="currentColor"/>
                    </span>
                  </div>
                </div>
                <!-- hidden img will help background-image `load` faster -->
                <img class="u-visually-hidden" src="/images/placeholder/video-poster-youtube.png" alt="">
              </div>
              <div class="c-video-player__container" data-video-type="youtube" data-video-id="NmtGKer20aY"></div>
            </div>
        
            <div class="c-video-player__description u-d-flex u-f-justify-end">
              <!-- Optional caption -->
              <figcaption class="c-caption u-m-t-sm u-p-horz-sm u-f-1-auto">
                <!-- Optional caption headline -->
                <!-- Optional caption text -->
                <p class="nyp-type-body-small u-m-0 u-c-gray-dark">Some descriptive text lorem ipsum doler sit amet.</p>
              </figcaption>
              <!-- Optional transcript link-->
              <div class="c-video-player__transcript u-m-t-sm">
                <a href="#" class="c-video-player__transcript-link subtle-link">
                  <span class="o-svg-icon o-svg-icon">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
                  </span>
                  Transcript
                </a>
              </div>
            </div>
        
          </figure>
        </div>
      </div>
    </div>
    

    <div class="c-video-player">
      <figure class="c-video-player__figure">
        <div class="c-video-player__ar o-ar o-ar--16:9">
          <div class="c-video-player__container" data-video-type="vimeo" data-video-id="433245115"></div>
        </div>
    
        <div class="c-video-player__description u-d-flex u-f-justify-end">
          <!-- Optional caption -->
          <!-- Optional transcript link-->
          <div class="c-video-player__transcript u-m-t-sm">
            <a href="#" class="c-video-player__transcript-link subtle-link">
              <span class="o-svg-icon o-svg-icon">
                <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                    <path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
              </span>
              Transcript
            </a>
          </div>
        </div>
    
      </figure>
    </div>
    

    Headline goes here

    Some descriptive text lorem ipsum doler sit amet.

    <div class="c-video-player">
      <figure class="c-video-player__figure">
        <div class="c-video-player__ar o-ar o-ar--16:9">
          <!-- Add title of video to aria-label if there is a poster image -->
          <div role="button" class="c-video-player__poster o-ar__item"
            aria-label="Play video Assorted Rides"
            style="background-image: url(/images/placeholder/video-poster.jpg);"
            tabindex="0"
          >
            <div class="c-video-player__poster--btn u-d-flex u-f-align-center u-f-justify-center">
              <div class="u-text-small u-c-red u-text-bold">
                <span class="o-svg-icon o-svg-icon--xl">
                  <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                      <path d="M456.4 214.7L104.4 6.6C75.8-10.3 32 6.1 32 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zm-16.2 55.1l-352 208C77.6 483.9 64 476.6 64 464V47.9c0-16.3 16.4-18.4 24.1-13.8l352 208.1c10.5 6.2 10.5 21.4.1 27.6z" fill="currentColor"/>
                </span>
              </div>
            </div>
            <!-- hidden img will help background-image `load` faster -->
            <img class="u-visually-hidden" src="/images/placeholder/video-poster.jpg" alt="">
          </div>
          <div class="c-video-player__container" data-video-type="vimeo" data-video-id="433245115"></div>
        </div>
    
        <div class="c-video-player__description u-d-flex u-f-justify-end">
          <!-- Optional caption -->
          <figcaption class="c-caption u-m-t-sm u-p-horz-sm u-f-1-auto">
            <!-- Optional caption headline -->
            <h4 class="nyp-type-h4 u-m-0">Headline goes here</h4>
            <!-- Optional caption text -->
            <p class="nyp-type-body-small u-m-0 u-c-gray-dark">Some descriptive text lorem ipsum doler sit amet.</p>
          </figcaption>
          <!-- Optional transcript link-->
          <div class="c-video-player__transcript u-m-t-sm">
            <a href="#" class="c-video-player__transcript-link subtle-link">
              <span class="o-svg-icon o-svg-icon">
                <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                    <path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
              </span>
              Transcript
            </a>
          </div>
        </div>
    
      </figure>
    </div>