Skip to main content

Video Gallery

Use Video Gallery to gather multiple related videos

Links:

Confluence
Demo Page
  • Initial video is a simplified Video Player component with optional poster image. The title, description, and transcript link are separate.
  • Thumbnails
      Author provides:
      • Small 16:9 thumbnail image
      • Video length (optional)
      • Video Type (YouTube or Vimeo)
      • Video ID
      • Title
      • Description (optional)
      • Transcript link (optional but neccessary for accessibility compliance)
       
<!--
  // Each gallery needs a unique ID.

  // `data-show-thumbnail-rows` is number of rows of thumbnails initially shown
  //   - default to `1`
  //   - if left empty, all thumbnails will be shown
-->
<div class="c-video-gallery" id="video-gallery-1234" data-show-thumbnail-rows="1">
  <div class="c-video-gallery__header">
    <!-- Optional Title -->
    <h2 class="c-video-gallery__title nyp-type-h2 u-m-b-sm">Video gallery headline lorem ipsum</h2>
    <!-- Optional Body -->
    <div class="c-video-gallery__description">Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.</div>
  </div>
  <!-- Only render `hr` if there is either a `c-video-gallery__title` or `c-video-gallery__description` -->
  <hr class="c-card-grid__divider u-m-vert-md">

  <div class="c-video-gallery__grid o-grid u-f-justify-center">
    <!-- On pages with a left-nav use `o-grid__item-12` class instead -->
    <div class="o-grid__item-10@lg">
      <div class="c-video-gallery__current">
        <figure class="c-video-player__figure">
          <div class="c-video-player__ar o-ar o-ar--16:9">
            <div class="c-video-player__container--wrapper">
              <div class="c-video-player__container"
                data-video-type="youtube"
                data-video-id="NmtGKer20aY"
                aria-labelledby="c-video-player__title-1234"
                aria-describedby="c-video-player__description-1234">
              </div>
            </div>
          </div>
          <div class="c-video-player__content u-d-flex">
            <figcaption class="c-caption u-p-r-sm">
              <!-- Unique ID for `aria-labelledby` of `c-video-player__container` above -->
              <h4 class="c-video-player__title nyp-type-h4" id="c-video-player__title-1234">Body Awareness Meditation (with music)</h4>
              <!-- Unique ID for `aria-describedby` of `c-video-player__container` above -->
              <div class="c-video-player__description u-c-gray-dark" id="c-video-player__description-1234">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In fermentum posuere urna nec tincidunt praesent semper.</div>
            </figcaption>
            <div class="c-video-player__transcript">
              <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"/>
                    </svg>
                </span>
                Transcript <span class="u-visually-hidden">of Body Awareness Meditation (with music)</span>
              </a>
            </div>
          </div>
        </figure>
      </div>
      <div class="c-video-gallery__related u-m-t-md">
        <!-- Uniqure ID required for accessibility -->
        <div class="video-gallery__related-title nyp-type-eyebrow" id="video-gallery__related-title-1234">Related Videos</div>

        <div class="c-card-grid__grid o-grid-pack u-m-t-sm">
          <!-- `aria-labelledby` should match `video-gallery__related-title-` unique id -->
          <ul class="c-video-gallery__thumbnail-list o-grid o-grid-pack__grid" aria-labelledby="video-gallery__related-title-1234">
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white active"
                data-thumbnail-video-type="vimeo"
                data-thumbnail-video-id="255099390"
                data-thumbnail-title="Body Awareness Meditation (with music)"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/audio-player-card-image-1-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Body Awareness Meditation (with music)</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="vimeo"
                data-thumbnail-video-id="255098942"
                data-thumbnail-title="Relaxing Music for Meditation"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/audio-player-card-image-1-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Relaxing Music for Meditation</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="vimeo"
                data-thumbnail-video-id="255097448"
                data-thumbnail-title="Gentle Chair Yoga and Breath Meditation"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/audio-player-card-image-1-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Gentle Chair Yoga and Breath Meditation</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="VwhCCdGWpRQ"
                data-thumbnail-title="3 AM Yoga"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/doctor-16-9-w600.jpg" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">3 AM Yoga</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="VwhCCdGWpRQ"
                data-thumbnail-title="AM Yoga"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/video-poster-youtube.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">AM Yoga</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="URzhqFDHmGk"
                data-thumbnail-title="Yoga for Anxiety"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>9:99</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Yoga for Anxiety</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
            <li class="c-video-gallery__thumbnail-listitem o-grid__item o-grid__item-12 o-grid__item-4@md">
              <div class="c-video-gallery--thumbnail c-card o-cover-link u-bg-white"
                data-thumbnail-video-type="youtube"
                data-thumbnail-video-id="NmtGKer20aY"
                data-thumbnail-title="Video Title"
                data-thumbnail-transcript="/downloads/video-transcript.pdf"
              >
                <div class="c-card__img">
                  <div class="o-ar o-ar--16:9">
                    <img class="o-ar__item" src="/images/placeholder/nyp-fpo-16-9.png" alt="">
                    <div class="c-card__img--info u-d-flex u-f-justify-between nyp-type-body-small">
                      <div class="thumbnail__now-playing u-c-white u-f-1-auto"><span>Now Playing</span></div>
                      <div class="thumbnail__time u-c-white u-d-flex u-f-justify-end u-f-1-auto"><span>00:00</span></div>
                    </div>
                  </div>
                </div>
                <div class="c-card__header">
                  <a href="#" class="nyp-type-body-normal u-c-black u-text-bold o-cover-link__overlay">Video Title</a>
                </div>
                <div class="thumbnail-description u-d-none">
                  <div class="coh-wysiwyg">
                    <p>This <strong>wysiwyg div</strong> has a description with <a href="#" class="styled-link">a link</a> in it. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. In <em>fermentum posuere urna nec</em> tincidunt praesent semper.</p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="u-d-flex u-f-justify-center">
    <button type="button" class="c-button c-button--secondary c-button--mobile__100 c-video-gallery__button u-m-t">Show more videos</button>
  </div>
</div>