Project 22: Video Player Layout
CSS Stylist
Builds on these lessons
Step 1 of 2
Project
Dynamic Viewport Units
Give .video-player height: 100dvh instead of 100vh. On mobile, the browser's address bar shows and hides as you scroll, changing the ACTUAL visible height — dvh (dynamic viewport height) tracks that in real time, so a full-screen player never gets clipped or leaves a gap.
🎯 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!
.video-player {
height: 100dvh;
width: 100%;
}