By default, videos are displayed 16:9 and at the width of its container.
YouTube
<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="u-vs-6"></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"/>
</svg>
</span>
Transcript
</a>
</div>
</div>
</figure>
</div>
YouTube poster image and caption
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"/>
</svg>
</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="u-vs-6"></div>
<div class="c-video-player__description u-d-flex u-f-justify-end">
<!-- Optional caption -->
<figcaption class="c-caption u-p-hor-2023 u-f-1-auto">
<div class="u-vs-2"></div>
<!-- Optional caption headline -->
<!-- Optional caption text -->
<p class="nyp-type-2023-body-xs-r u-m-0 u-c-2023-grey-dark">Some descriptive text lorem ipsum doler sit amet.</p>
<div class="u-vs-2"></div>
</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"/>
</svg>
</span>
Transcript
</a>
</div>
</div>
</figure>
</div>
</div>
</div>
Vimeo
<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="u-vs-6"></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"/>
</svg>
</span>
Transcript
</a>
</div>
</div>
</figure>
</div>
Vimeo with poster image and complex caption
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"/>
</svg>
</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="u-vs-6"></div>
<div class="c-video-player__description u-d-flex u-f-justify-end">
<!-- Optional caption -->
<figcaption class="c-caption u-p-hor-2023 u-f-1-auto">
<div class="u-vs-2"></div>
<!-- Optional caption headline -->
<h4 class="nyp-type-2023-h4 u-m-0">Headline goes here</h4>
<div class="u-vs-3"></div>
<!-- Optional caption text -->
<p class="nyp-type-2023-body-xs-r u-m-0 u-c-2023-grey-dark">Some descriptive text lorem ipsum doler sit amet.</p>
<div class="u-vs-2"></div>
</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"/>
</svg>
</span>
Transcript
</a>
</div>
</div>
</figure>
</div>