#### Embed Video

#### Ratio Video 16:9

Show Code

Wrap any embed in`<iframe>` tag, in a parent element, use `ratio-16x9` class to set aspect ratio 16:9.

    <!-- Ratio Video 16:9 -->
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/1y_kfWUCFDQ" title="YouTube video" allowfullscreen></iframe>
    </div>

#### Ratio Video 4:3

Show Code

Use `ratio-4x3` class to set aspect ratio 4:3.

    <!-- Ratio Video 4:3 -->
    <div class="ratio ratio-4x3">
        <iframe src="https://www.youtube.com/embed/1y_kfWUCFDQ" title="YouTube video" allowfullscreen></iframe>
    </div>

#### Custom Ratios

Show Code

Use `--vz-aspect-ratio: 50%` to style element to set aspect ratio 2:1.

    <!-- Custom Ratio Video -->
    <div class="ratio" style="--vz-aspect-ratio: 50%;">
        <iframe src="https://www.youtube.com/embed/2RZQN_ko0iU" title="YouTube video" allowfullscreen></iframe>
    </div>

#### Ratio Video 21:9

Show Code

Use `ratio-21x9` class to set aspect ratio 21:9.

    <!-- Ratio Video 21:9 -->
    <div class="ratio ratio-21x9">
        <iframe src="https://www.youtube.com/embed/Z-fV2lGKnnU" title="YouTube video" allowfullscreen></iframe>
    </div>

#### Ratio Video 1:1

Show Code

Use `ratio-1x1` class to set aspect ratio 1:1.

    <!-- Ratio Video 1:1 -->
    <div class="ratio ratio-1x1">
        <iframe src="https://www.youtube.com/embed/GfSZtaoc5bw" title="YouTube video" allowfullscreen></iframe>
    </div>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark