16:9
Below is default aspect ratio of 16:9.
Supported elements
You can place an iframe, video, embed, or object element directly in the object, or use the block element class of o-ar__item on any element.
<div class="o-ar o-ar--16:9">
<iframe src="https://www.youtube.com/embed/gqdzXNsL_2o" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
4:3
<div class="o-ar o-ar--4:3">
<iframe src="https://player.vimeo.com/video/77364144" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
</div>
1:1
<div class="u-w-25">
<div class="o-ar o-ar--1:1">
<div class="o-ar__item">
<img src="/images/placeholder/ps-janet.jpg" alt="">
</div>
</div>
</div>
Adding your own aspect ratios
You can override the default NYP Framework map for aspect ratios when configuring and including NYP Framework. See more in the installing and configuring NYP Framework section.
// Default
$nyp-aspect-ratios: (
"1\\:1": (1:1),
"4\\:3": (4:3),
"16\\:9": (16:9)
) !default;
// Override defaults with your own.
$nyp-aspect-ratios: (
"1\\:1": (1:1),
"4\\:3": (4:3),
"16\\:9": (16:9),
"golden": (1.618:1)
);