Ratios

Use .velin-ratio with an aspect modifier to create responsive, proportional containers for videos, maps, and embeds.

Preset ratios

Four built-in aspect ratios are available.

1×1

4×3

16×9

21×9

<div class="velin-ratio velin-ratio--1x1">…</div>
<div class="velin-ratio velin-ratio--4x3">…</div>
<div class="velin-ratio velin-ratio--16x9">…</div>
<div class="velin-ratio velin-ratio--21x9">…</div>

Custom ratio

Set a custom ratio via the --velin-ratio-aspect CSS variable.

<div class="velin-ratio" style="--velin-ratio-aspect: 50%">
  <!-- 2:1 aspect ratio (50% = 1/2) -->
  <iframe src="…"></iframe>
</div>