# Video

Use this to add a video to your page.

## Appearance

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/scaled-1680-/JA0image.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/JA0image.png)

## Editing the Block

### Content

See here for more information about locating the Video IDs for Youtube and Vimeo.

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Heading</td><td>*Enter a short block title - this will show above the main content of the block*</td></tr><tr><td>Video ID</td><td>*Enter the unique ID of the video you wish to add*  
</td></tr><tr><td>Video Type</td><td>Choose from:

- Youtube
- Vimeo

</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*Choose from:*

- *25%*
- *33%*
- *50%*
- *66%*
- *75%*
- *100%*
- *Full Width (set to always be the full width of the user's device)*

</td></tr><tr><td>Visibility</td><td>*Set the block visibility from the list:*

- *Default (both)*
- *Desktop Only*
- *Mobile Only*
- *Hidden (none)*

</td></tr><tr><td>Heading Position</td><td>*Alter the alignment of the block header:*

<div aria-label="Page Section Options" class="pointer-container" id="bkmrk-%C2%A0" refs="pointer@pointer" tabindex="-1"><div class="pointer flex-container-row items-center justify-space-between p-s anim is-page-editable"><div class="flex-container-row items-center gap-s" refs="pointer@mode-section"><button class="text-button icon px-xs" title="Permalink mode, Press to show include tag"><svg class="svg-icon" data-icon="link" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"></path></svg></button><div class="input-group"> <button class="button outline icon" title="Copy Link" type="button"><svg class="svg-icon" data-icon="copy" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"></path></svg></button></div></div>[<svg class="svg-icon" data-icon="edit" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>](https://bookstack.iconography.co.uk/books/general/page/text-blocks/edit?content-id=bkmrk-left-central-right&content-text=%0ALeft%0ACentral%0ARight%0A "Jump to section in editor")</div></div>- *Left*
- *Central*
- *Right*

</td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-auto-p" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Auto-play?</td><td>*Toggle auto-play for the video (e.g. if the video automatically plays on page load)*</td></tr><tr><td>Loop?</td><td>*Toggle whether the video will or will not loop*</td></tr></tbody></table>

### Advanced

#### Padding

Adding padding will insert space within the current block; this will adjust the position of content within the block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/padding).

#### Margin

The margin will add additional space around the current block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/margin).