> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/html-5-video.md).

# HTML 5 - Video

The HTML5 video element allows you to embed videos in the Shopping Experiences without relying on external video platforms like YouTube or Vimeo.

{% hint style="success" %}
**Data protection with external video platforms**

Videos from external video platforms may generally only be played if the corresponding cookie consents are obtained.

Therefore, it cannot be ensured that 100% of all page visitors will see the displayed videos.

The HTML 5 video element pulls the videos from your Shopware media library.\
**Thus, no cookie consent is required.**
{% endhint %}

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FQXhqXeQquKpYf6DTLQBw%2FBildschirmfoto%202024-10-07%20um%2022.30.47.png?alt=media&amp;token=63addc42-44c5-42e0-93d6-86f926ef27f9" alt=""><figcaption></figcaption></figure>

### Video Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FQzezRpZIaXxz0bolG91L%2FBildschirmfoto%202024-10-07%20um%2022.31.45.png?alt=media&amp;token=a4e97fb2-cca3-4504-a2e0-3f993458c1e8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="232">Function</th><th>Description</th></tr></thead><tbody><tr><td>Upload video (1)</td><td>Here you can upload/assign the video file from your Shopware media library.</td></tr><tr><td>Preview image (2)</td><td>If the video does not start automatically, you can upload a preview image/thumbnail here.</td></tr></tbody></table>

### General Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F4RgIunc3CoMaltuGOuMe%2FBildschirmfoto%202024-10-07%20um%2022.32.12.png?alt=media&amp;token=f3fa9f3e-5408-4222-ad30-e1105f1f05c9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="258">Function</th><th>Description</th></tr></thead><tbody><tr><td>Width (1)</td><td>Here you set the width of the video in the corresponding block.</td></tr><tr><td>Height (2)</td><td><strong>auto</strong> means that the height will be automatically determined based on the format (recommended). Of course, you can also set your own values here.</td></tr><tr><td>Vertical alignment (3)</td><td>The vertical alignment is noticeable when the video is placed next to a taller element, such as a long text passage.</td></tr><tr><td>Horizontal alignment (4)</td><td>Here you can determine the horizontal alignment of the video within the block.</td></tr></tbody></table>

### Advanced Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FV0YV3mWBvVXqqbbZd6Vl%2FBildschirmfoto%202024-10-07%20um%2022.32.54.png?alt=media&amp;token=e2971a1e-b671-4151-860e-9adb4f106529" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="299">Function</th><th>Description</th></tr></thead><tbody><tr><td>Play on page load (1)</td><td>If sound is enabled, this may be disturbing. Always choose carefully.</td></tr><tr><td>Enable video controls (2)</td><td>Videos that are primarily used as design elements should not have controls.</td></tr><tr><td>Mute video by default (3)</td><td>If (1) is active, this function should possibly be deactivated.</td></tr><tr><td>Loop video (4)</td><td>If the video has finished, it will automatically start again.</td></tr></tbody></table>