> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/basic/video.md).

# Video

The **Video** block allows you to embed or upload video content from various sources directly into your flexible section. You can control the video source, playback behavior, aspect ratio, width, and corner styling.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FdxnjcmWoVnI2ajlbMMQs%2Fimage.png?alt=media&amp;token=192efaf5-cc36-4b48-bd8b-20175bf6cbfa" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                 | Description                                                                                                                                                                                             |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Video Source**        | <p>Select where the video comes from:</p><ul><li>External Link (Default — for YouTube/Vimeo)</li><li>Uploaded Video (for self-hosted video files).</li></ul>                                            |
| **Video URL**           | <p><em>Only visible when Video Source is External Link</em>.</p><p>Paste the URL for the external video (accepts YouTube or Vimeo links).</p>                                                           |
| **Local Video**         | <p><em>Only visible when Video Source is Uploaded Video</em>.</p><p>Allows you to upload a self-hosted video file to the section.</p>                                                                   |
| **Video Poster**        | <p><em>Only visible when Video Source is Uploaded Video</em>.</p><p>Upload an image to display as a cover screen before the video starts playing.</p>                                                   |
| **Video Autoplay**      | A checkbox that, when enabled, allows the video to start playing automatically when the page loads (Default is checked).                                                                                |
| **Video Looping**       | A checkbox that, when enabled, ensures the video will automatically restart once it finishes playing.                                                                                                   |
| **Show video controls** | When enabled, playback controls (play, pause, volume, etc.) will be displayed on the video, allowing users to control playback manually.                                                                |
| **Video alt text**      | Provides descriptive text for the video, which is crucial for SEO and accessibility.                                                                                                                    |
| **Aspect Ratio**        | <p>Defines the dimensions of the video container. Options include:</p><ul><li>Square</li><li>Portrait</li><li>16:9 (Default)</li><li>21:9</li><li>Adapt (Maintains the original video ratio).</li></ul> |
| **Width unit type**     | <p>2 options:</p><ul><li>Percent (%)</li></ul>                                                                                                                                                          |

* Pixels (px)

\| | \*\*Video width\*\* | Sets the width of the video block on larger screens, measured in percentage (%) (Range: 1% to 100%). | | \*\*Mobile Width\*\* | Sets the width of the video block specifically on mobile devices, measured in percentage (%) (Range: 1% to 100%). | | \*\*Corner Radius\*\* |

Controls the rounding of the video block's corners. Options include:

* Inherit (Default — adopts the **Theme settings**'s radius),
* None (Sharp corners)
* Custom (Allows you to set a specific radius).

\| | \*\*Custom Radius\*\* |

*Only visible when Corner Radius is Custom*.

Use the slider to set a specific corner radius for the video block, measured in pixels (px) (Range: 0px to 100px).

|

## Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| **Bottom** | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |