Embed Video
Ratio Video 16:9
Wrap any embed in<iframe> tag, in a parent element, use ratio-16x9 class to set aspect ratio 16:9.
HTML Preview
<!-- 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
Use ratio-4x3 class to set aspect ratio 4:3.
HTML Preview
<!-- 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
Use --tb-aspect-ratio: 50% to style element to set aspect ratio 2:1.
HTML Preview
<!-- Custom Ratio Video -->
<div class="ratio" style="--tb-aspect-ratio: 50%;">
<iframe src="https://www.youtube.com/embed/2RZQN_ko0iU" title="YouTube video" allowfullscreen></iframe>
</div>Ratio Video 21:9
Use ratio-21x9 class to set aspect ratio 21:9.
HTML Preview
<!-- 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
Use ratio-1x1 class to set aspect ratio 1:1.
HTML Preview
<!-- Ratio Video 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/GfSZtaoc5bw" title="YouTube video" allowfullscreen></iframe>
</div>
Loading...
Customizer
Steex Builder
Choose your themes & layouts etc.
Layout
Choose your layout
Vertical
Horizontal
Two Column
Theme
Choose your suitable Theme.
Default
Material
Creative
Minimal
Modern
Interaction
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Coming Soon
Brand
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.