Project 22: Video Player Layout

React Engineer

Builds on these lessons

Vite Why Vite Project Structure Vite Env Variables Vite Path Aliases

Step 1 of 3

Project

Environment Variables in Vite

Read a video CDN base URL from import.meta.env.VITE_CDN_URL. Vite only exposes environment variables prefixed with VITE_ to client code — a deliberate safeguard so a stray server-only secret in .env doesn't accidentally end up shipped to the browser.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

const cdnUrl = import.meta.env.VITE_CDN_URL;

export default function VideoPlayer({ videoId }) {
  return <video src={cdnUrl + "/" + videoId + ".mp4"} controls />;
}

← Previous Next →