# Responsive Video

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/responsiveVideo
*Captured:* 2026-04-27T14:58:27.160Z

## Responsive Video

### Example: Example 1

Responsive Video 16x9

Responsive Video 4x3

#### React (tsx)

```tsx
import ResponsiveVideo from '@rio-cloud/rio-uikit/ResponsiveVideo';

export default () => (
    <div className='padding-left-15pct padding-right-15pct'>
        <div className='h3'>Responsive Video 16x9</div>
        <ResponsiveVideo
            src='https://www.youtube.com/embed/znckWdXTbTk'
            aspectRatio={ResponsiveVideo.ASPECT_RATIO_16_BY_9}
            allowFullScreen
        />
        <hr />
        <div className='h3'>Responsive Video 4x3</div>
        <ResponsiveVideo
            src='https://www.youtube.com/embed/znckWdXTbTk'
            aspectRatio={ResponsiveVideo.ASPECT_RATIO_4_BY_3}
            allowFullScreen
        />
    </div>
);
```

#### HTML (html)

```html
<div class="padding-left-15pct padding-right-15pct">
    <div class="h3">Responsive Video 16x9</div>
    <div class="video-responsive video-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/znckWdXTbTk" allowfullscreen="">
        </iframe>
    </div>
    <hr>
    <div class="h3">Responsive Video 4x3</div>
    <div class="video-responsive video-responsive-4by3">
        <iframe src="https://www.youtube.com/embed/znckWdXTbTk" allowfullscreen="">
        </iframe>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| src | string | — | The link to the source of the video file. |
| aspectRatio | '4by3' \| '16by9' | '16by9' | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3 ResponsiveVideo.ASPECT_RATIO_16_BY_9 '4by3' '16by9' |
| allowFullScreen | boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |
| className | string | — | Additional classes added to the wrapping element. |