Demo 05: Art Direction for Video

Responsive Video with Art Direction

This video uses the media attribute on <source> elements to serve different video crops based on your viewport size. Resize your browser to see the effect.

Viewport:

        <video controls poster="poster.jpg">
  <!-- Vertical video for mobile -->
  <source
    src="video-vertical.mp4"
    type="video/mp4"
    media="(max-width: 767px) and (orientation: portrait)"
  />

  <!-- Square video for tablet -->
  <source
    src="video-square.mp4"
    type="video/mp4"
    media="(min-width: 768px) and (max-width: 1023px)"
  />

  <!-- Widescreen for desktop -->
  <source
    src="video-widescreen.mp4"
    type="video/mp4"
    media="(min-width: 1024px)"
  />

  <!-- Fallback -->
  <source src="video-standard.mp4" type="video/mp4" />
</video>
      

Note: In production, you would create different video crops during editing/encoding. This demo uses the same video file for all breakpoints to illustrate the concept. The browser will select the first <source> whose media query matches.

Why Art Direction Matters

Different screen sizes have different optimal aspect ratios and compositions. Art direction ensures your video content looks intentional and professional on every device:

Mobile (9:16): Vertical composition, centered subjects, larger text
Tablet (1:1 or 4:3): Square or classic TV ratio, balanced framing
Desktop (16:9 or 21:9): Widescreen, cinematic framing, detail in background