Project 22: Video Player Layout

HTML Masterclass

Builds on these lessons

Api Drag Drop Api Intersection Observer Api Resize Observer

Step 1 of 3

Project

Video & a Draggable Playlist Item

Add a <video controls> element and a playlist <ul> below it. Give each <li> the draggable="true" attribute — that alone makes it a native drag source under the HTML Drag and Drop API, no JavaScript needed to pick it up; a script would only be needed to handle where it gets dropped.

🎯 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!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Watch | StreamBox</title>
</head>
<body>
  <video controls poster="episode-1-thumb.jpg">
    <source src="episode-1.mp4" type="video/mp4">
  </video>
  <h2>Up Next</h2>
  <ul id="playlist">
    <li draggable="true">Episode 2: The Signal</li>
    <li draggable="true">Episode 3: Static</li>
  </ul>
</body>
</html>

← Previous Next →