---
title: Video
---
Using the QVideo component makes embedding a video like YouTube easy. It also resizes to fit the container by default.

> [!TIP]
> You may also want to check our own HTML 5 video player component: [QMediaPlayer](https://github.com/quasarframework/quasar-ui-qmediaplayer), which is far more advanced than QVideo (which essentially is an iframe pointing to embedded YouTube videos).

## QVideo API

### Props

- `ratio` (string | number, optional)
  Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')
  Examples: `1`, `'1.7778'`, `:ratio="4/3"`, `:ratio="16/9"`
- `src` (string, required)
  The source url to display in an iframe
  Examples: `'https://www.youtube.com/embed/k3_tw44QsZQ'`
- `title` (string, optional)
  (Accessibility) Set the native 'title' attribute value of the inner iframe being used
  Examples: `'My Daily Marathon'`
- `fetchpriority` (string, optional), default `'auto'`
  Provides a hint of the relative priority to use when fetching the iframe document
  Accepts: `'high'`, `'low'`, `'auto'`
- `loading` (string, optional), default `'eager'`
  Indicates how the browser should load the iframe
  Accepts: `'eager'`, `'lazy'`
- `referrerpolicy` (string, optional), default `'strict-origin-when-cross-origin'`
  Indicates which referrer to send when fetching the frame's resource
  Accepts: `'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`

## Usage

### Basic

```vue
<template>
  <q-video src="https://www.youtube.com/embed/aqz-KE-bpKQ?rel=0" />
</template>
```

### With aspect ratio

```vue
<template>
  <q-video
    :ratio="16 / 9"
    src="https://www.youtube.com/embed/aqz-KE-bpKQ?rel=0"
  />
</template>
```

### Markup equivalent

Example "HTML markup":

```vue
<template>
  <div class="q-video">
    <iframe
      src="https://www.youtube.com/embed/aqz-KE-bpKQ?rel=0"
      frameborder="0"
      allowfullscreen
    />
  </div>
</template>
```

## Accessibility *(v2.25+)*

The iframe's accessible name comes from the `title` prop — always provide it, otherwise screen readers announce an anonymous frame with no way to tell what it embeds. Captions and player keyboard support are the embedded player's responsibility, not QVideo's.