<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>
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: null
version: 1.0.0
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>