New This website is new, your feedback will help us to improve it.

Responsive embed

Overview

Use the aspect-<> classes along with object-cover to control how images and other embeds fit into containers.
See Tailwind aspect ratios for more information.

Supported elements

These elements are fully supported:

  • <iframe>
  • <embed>
  • <video>
  • <object>

Variants

Responsive embed 16:9

<iframe width="500" class="aspect-16/9" src="https://www.openstreetmap.org/export/embed.html?bbox=-1.8279495835304262%2C51.17813064804965%2C-1.824409067630768%2C51.179662451007445&amp;layer=mapnik" frameborder="0"></iframe>

Responsive embed 4:3

<iframe width="500" class="aspect-4/3" src="https://www.openstreetmap.org/export/embed.html?bbox=-1.8279495835304262%2C51.17813064804965%2C-1.824409067630768%2C51.179662451007445&amp;layer=mapnik" frameborder="0"></iframe>