<div class="usa-embed-container" aria-label="16:9">
    <iframe src="data:text/html,%3C!DOCTYPE%20html%3E%0A%3Cmeta%20charset%3D%22utf-8%22%3E%0A%3Cstyle%3E%0Ahtml%20%7B%0A%20%20background-color%3A%20black%3B%0A%20%20color%3A%20white%3B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A%20100%25%3B%0A%20%20display%3A%20flex%3B%0A%20%20align-items%3A%20center%3B%0A%20%20justify-content%3A%20center%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Ctitle%3E16%3A9%20aspect%20ratio%20example%20iframe%3C%2Ftitle%3E%0A%3Cp%3E16%3A9%20aspect%20ratio%20example%20iframe%3C%2Fp%3E%0A"
        title="16:9 aspect ratio example iframe" frameborder="0"></iframe>
</div>

<p>
    The responsive embed container can be used to ensure that its contents scale to the width of its parent element while retaining an aspect ratio of 16:9.
</p>

Responsive embed container

The usa-embed-container class can be applied to a div that contains an <iframe> to ensure the content inside the <iframe> is responsive.

The usa-embed-container class does not define a maximum width and <iframe> content will expand to fill the space it is given. A max-width property may be applied to the parent container to restrict the width of the embedded content.

The usa-embed-container class currently assumes the embedded content fits a 16:9 aspect ratio – the default on the most popular video hosting providers. The $aspect-width and $aspect-height variables in the _embed component may be adjusted to support additional aspect ratios.

<div class="usa-embed-container" aria-label="16:9">
  <iframe src="{{ iframe_content | dataurl('text/html') }}" title="16:9 aspect ratio example iframe" frameborder="0"></iframe>
</div>

<p>
  The responsive embed container can be used to ensure that its
  contents scale to the width of its parent element while retaining
  an aspect ratio of 16:9.
</p>
package:
  name: uswds
  version: 1.4.3
uswds:
  path: ../../dist
iframe_content: |
  <!DOCTYPE html>
  <meta charset="utf-8">
  <style>
  html {
    background-color: black;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>
  <title>16:9 aspect ratio example iframe</title>
  <p>16:9 aspect ratio example iframe</p>
  • Handle: @embed-container
  • Preview:
  • Filesystem Path: src/components/utilities/embed-container/embed-container.njk