# Block #2 - Video Hero

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

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FnntaKWvsWbepOokinjRZ%2Fblock2.jpg?alt=media&#x26;token=05b8b91a-988c-45e5-9d27-5dd6093625df" 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="<https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2F8LGFIeVkxK0G6o1S54s9%2Fsample-video-demo-content.zip?alt=media&token=36a09f81-f305-44de-ab00-ac32f541fd60>" %}
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)*](https://rosea.gitbook.io/monocolor/demo-content/front-page-blocks/advanced-options/additional-classes)
* 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/)