Responsive media lets you serve a different video or image depending on the visitor's screen size. A portrait video on mobile, a widescreen landscape video on desktop. A tightly cropped image on phones, a wide editorial shot on large screens. The browser loads only the version that matches — no wasted bandwidth. Why it matters: - Mobile videos are typically portrait (9:16) or square — a landscape desktop video looks wrong and wastes data - Mobile images need tighter crops to keep subjects visible on small screens - Serving the right size reduces page load time by 40–70% on mobile Three ways to set responsive media: 1. Ask the AI (fastest) Attach or describe two video/image files — one for mobile, one for desktop: - "Add a video background to the hero — use video-mobile.mp4 for phones and video-desktop.mp4 for desktop" - "Set the hero image to photo-portrait.jpg on mobile and photo-wide.jpg on desktop" The AI automatically applies the correct HTML5 responsive source pattern. 2. Element editor (point-and-click) Double-click any video or image section element in the live preview to open the element editor. For videos (

Create your X-Shop account