2021-05-04 13:51:16 +00:00
# Responsive Media
[component-header:sl-responsive-media]
Displays media in the desired aspect ratio.
You can slot in any [replaced element ](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element ), including `<iframe>` , `<img>` , and `<video>` . As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is `16:9` .
```html preview
< sl-responsive-media >
2022-03-02 15:10:41 +00:00
< img
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8& ixlib=rb-1.2.1& auto=format& fit=crop& w=1800& q=80"
alt="A train riding through autumn foliage with mountains in the distance."
/>
2021-05-04 13:51:16 +00:00
< / sl-responsive-media >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlResponsiveMedia >
2022-03-02 15:10:41 +00:00
< img
2021-11-04 22:12:47 +00:00
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8& ixlib=rb-1.2.1& auto=format& fit=crop& w=1800& q=80"
alt="A train riding through autumn foliage with mountains in the distance."
/>
< / SlResponsiveMedia >
);
```
2021-05-04 13:51:16 +00:00
## Examples
### Responsive Images
The following image maintains a `4:3` aspect ratio as its container is resized.
```html preview
< sl-responsive-media aspect-ratio = "4:3" >
2022-03-02 15:10:41 +00:00
< img
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8& ixlib=rb-1.2.1& auto=format& fit=crop& w=1800& q=80"
alt="Two blue chairs on a sandy beach."
/>
2021-05-04 13:51:16 +00:00
< / sl-responsive-media >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlResponsiveMedia aspect-ratio = "4:3" >
2022-03-02 15:10:41 +00:00
< img
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8& ixlib=rb-1.2.1& auto=format& fit=crop& w=1800& q=80"
2021-11-04 22:12:47 +00:00
alt="Two blue chairs on a sandy beach."
/>
< / SlResponsiveMedia >
);
```
2021-05-04 13:51:16 +00:00
### Responsive Videos
The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
```html preview
< sl-responsive-media aspect-ratio = "16:9" >
2022-03-02 15:10:41 +00:00
< iframe
src="https://player.vimeo.com/video/1053647?title=0& byline=0& portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
>< / iframe >
2021-05-04 13:51:16 +00:00
< / sl-responsive-media >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlResponsiveMedia aspect-ratio = "16:9" >
2022-03-02 15:10:41 +00:00
< iframe
src="https://player.vimeo.com/video/1053647?title=0& byline=0& portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
/>
2021-11-04 22:12:47 +00:00
< / SlResponsiveMedia >
);
```
2021-05-04 13:51:16 +00:00
[component-metadata:sl-responsive-media]