Media

Responsive image, video, and embed components for displaying visual content.

Image with Caption

Responsive image with figcaption, lazy loading, and rounded border.

html

A beautiful landscape photograph taken at sunset

<figure class="vt-rounded-2xl vt-border vt-overflow-hidden">
  <img src="..." alt="..." class="vt-w-full vt-h-auto vt-object-cover" loading="lazy" />
  <figcaption class="vt-px-4 vt-py-3 vt-text-sm vt-text-mains-quaternary vt-bg-surfaces-surface">
    Photo description
  </figcaption>
</figure>

Video

Native HTML5 video player with controls, wrapped in a 16:9 aspect ratio container.

html

HTML5 Video Player

<div class="vt-aspect-[16/9] vt-rounded-2xl vt-border vt-overflow-hidden">
  <video controls class="vt-w-full vt-h-full vt-object-cover">
    <source src="video.mp4" type="video/mp4" />
  </video>
</div>

YouTube Embed

Responsive YouTube embed with 16:9 aspect ratio. Uses iframe with proper allow attributes.

html

YouTube Embed

<div class="vt-aspect-[16/9] vt-rounded-2xl vt-border vt-overflow-hidden">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    class="vt-w-full vt-h-full vt-border-0"
  ></iframe>
</div>

Image Gallery

Grid-based image gallery with consistent aspect ratios and lazy loading.

html

<div class="vt-grid vt-grid-cols-2 vt-md:grid-cols-3 vt-gap-3">
  <figure class="vt-rounded-xl vt-border vt-overflow-hidden">
    <img src="..." alt="..." class="vt-w-full vt-aspect-square vt-object-cover" loading="lazy" />
  </figure>
  <!-- ...more items -->
</div>

Avatar Image

Circular image for profile pictures and avatars.

html

<img src="..." alt="..." class="vt-w-16 vt-h-16 vt-rounded-full vt-object-cover vt-border-2 vt-border-border-default" />

Background with Overlay

Image used as a background with a gradient overlay and text content on top.

html

Featured Article

A guide to building responsive media layouts

<div class="vt-relative vt-rounded-2xl vt-overflow-hidden vt-h-64">
  <img src="..." alt="" class="vt-absolute vt-inset-0 vt-w-full vt-h-full vt-object-cover" />
  <div class="vt-absolute vt-inset-0 vt-bg-gradient-to-t vt-from-generic-black/80 vt-to-transparent"></div>
  <div class="vt-absolute vt-bottom-0 vt-p-6 vt-text-generic-white">
    <h3 class="vt-text-lg vt-font-bold">Card Title</h3>
    <p class="vt-text-sm vt-opacity-80">Description text</p>
  </div>
</div>

Guidelines

Present images, video, and embeds in responsive, aspect-ratio-locked containers with meaningful alt text.

Sunset over the hills

Lock media to a fixed aspect ratio and describe it with a caption.

Don't

Don't crop media to a fixed height — lock its ratio.

Keep gallery thumbnails on one consistent aspect ratio.

Don't

Don't mix aspect ratios in a grid — it looks ragged.

API Reference

All CSS classes and data attributes.

Class	Type	Description
`vt-aspect-square / vt-aspect-video`	Layout	Aspect-ratio boxes for images and embeds
`vt-rounded-2xl vt-overflow-hidden`	Layout	Card-radius clipping for media content
`vt-object-cover`	Modifier	Media fills its box without distortion

Accessibility

Keyboard and screen reader support.

Feature	Details
Alt text	Every img carries meaningful alt; decorative media uses alt=""
Embeds	iframes get a title describing the embedded content