Aspect Video aspect-video

Set elements to maintain a 16:9 aspect ratio, perfect for video containers and widescreen content.

Live Examples

Video Container

16:9 Video
<div class="aspect-video bg-gradient-to-br from-blue-500 to-purple-600">
  Video content
</div>

Video Grid

Video 1
Video 2
<div class="grid grid-cols-2 gap-2">
  <div class="aspect-video bg-red-500">Video 1</div>
  <div class="aspect-video bg-green-500">Video 2</div>
</div>

YouTube Embed Style

YouTube Video

<div class="aspect-video bg-black rounded-lg overflow-hidden">
  <iframe src="https://youtube.com/embed/..." class="w-full h-full"></iframe>
</div>

Hero Banner

Hero Content

Perfect 16:9 ratio

<div class="aspect-video bg-gradient-to-r from-purple-500 to-red-500">
  Hero banner content
</div>

Responsive Video Container

Responsive Video

Maintains 16:9 ratio at any size

<div class="max-w-4xl mx-auto">
  <div class="aspect-video bg-gradient-to-br from-blue-600 to-pink-600">
    Responsive video content
  </div>
</div>

Common Use Cases

🎥 Video Embeds

Perfect for YouTube, Vimeo, and other video platform embeds that need consistent 16:9 ratios.

🖼️ Hero Banners

Create stunning hero sections with widescreen proportions that work across all devices.

📺 Media Players

Build custom video players and media interfaces with standard video aspect ratios.

🎮 Game Streams

Display game streaming content and gameplay videos in their native 16:9 format.

📱 Thumbnails

Create consistent video thumbnails and preview images for content galleries.

🎬 Presentations

Design slide containers and presentation viewers with standard widescreen ratios.

Best Practices & Tips

✅ Do

  • • Use for video embeds and media content
  • • Combine with responsive width classes
  • • Apply to wrapper containers, not direct video elements
  • • Test with actual video content
  • • Consider loading states and placeholders

❌ Don't

  • • Apply directly to iframe or video elements
  • • Use for non-video content without consideration
  • • Forget to handle different video sources
  • • Ignore accessibility for video controls
  • • Mix with conflicting aspect ratio utilities