> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/monocolor/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/monocolor/demo-content/front-page-blocks/hero-blocks/block-2-video-hero.md).

# Block #2 - Video Hero

Script: **vidbg.js v2.1** is licensed under The MIT License.

<figure><img src="/files/u2qNX4mxpKEtxVo7xFcA" alt=""><figcaption></figcaption></figure>

## Demo Settings

* Full-width container: **Off**
* Content Wrapper Alignment: **Left**
* Heading: **Works with Moodle 4.x**
* Caption

  <pre class="language-html" data-overflow="wrap" data-line-numbers><code class="lang-html">&#x3C;p class="text-size-lg">The Monocolor theme is fully compatible with the latest Moodle version.&#x3C;/p>
  &#x3C;p class="text-size-xs mt-3">Learn how to use this theme. Check out &#x3C;a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.&#x3C;/a>&#x3C;/p>
  </code></pre>

{% file src="/files/vDzVUlVdlVEcQq1JPNEJ" %}
The package include: poster file -> JPG, video files -> mp4, webm
{% endfile %}

## Available options

* Full-width container *(Full width: 100%, Standard: max-width: 1200px )*
* [Additional Class Name *(For developers)*](/monocolor/demo-content/front-page-blocks/advanced-options/additional-classes.md)
* Block Intro Content *(HTML Content before the block)*
* Content Wrapper Alignment *(Left, Middle, Right)*
* Heading Size *(Normal, Large, Extra Large)*

  ```css
  Normal: 40px , Large: 60px , Extra Large: 80px
  ```
* Heading Color *(Black, White, Gradient)*

  ```php
  Gradient: $primary-color-200, $primary-color-600

  // CSS class
  .rui-text--gradient
  ```
* Heading Font Weight *(Normal, Medium, Bold)*
* Show Colorized Content Wrapper (On/Off)
  * Content Wrapper Color (HEX)

## Video Options

* Caption
* HTML Content
* Footer Content
* Video Background *(poster)*
* Video Background *(mp4)*
* Video Background *(webm)*
  * mp4 to webm converters:
    * [*https://www.freeconvert.com/mp4-to-webm*](https://www.freeconvert.com/mp4-to-webm)
    * [*https://cloudconvert.com/mp4-to-webm*](https://cloudconvert.com/mp4-to-webm)
    * [*https://convertio.co/pl/mp4-webm/*](https://convertio.co/pl/mp4-webm/)