Embed Video
Loading...
Customizer
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
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>