Add a video player — practice exercise

What you'll be asked to do

1. 1.Add a video playerexercise · easy · 10 min

   Add a video with controls.

   Passes when: Add a video with controls.

2. 2.Set a posterexercise · easy · 10 min · practice plan

   Show a still image before playback starts.

   Passes when: Show a still image before playback starts.

3. 3.Give it a sizeexercise · easy · 10 min · practice plan

   Set the video's width and height.

   Passes when: Set the video's width and height.

4. 4.Use a source elementexercise · easy · 10 min · practice plan

   Supply the file with a nested source.

   Passes when: Supply the file with a nested source.

5. 5.A silent autoplaying clipexercise · medium · 10 min · practice plan

   Autoplay a muted, looping video with controls.

   Passes when: Autoplay a muted, looping video with controls.

6. 6.Fix the video with no controlsbug fix · easy · 8 min

   Give the viewer a way to play and pause.

   Passes when: Give the viewer a way to play and pause.

7. 7.Fix the poster in the wrong attributebug fix · easy · 8 min · practice plan

   The still frame is the poster attribute.

   Passes when: The still frame is the poster attribute.

8. 8.Fix the size set only in CSSbug fix · easy · 8 min · practice plan

   Set real width and height so the layout does not jump.

   Passes when: Set real width and height so the layout does not jump.

9. 9.Fix the image element used for videobug fix · easy · 8 min · practice plan

   A video needs the video element.

   Passes when: A video needs the video element.

10. 10.Fix the autoplay with soundbug fix · easy · 8 min · practice plan

    Browsers block autoplay unless the video is muted.

    Passes when: Browsers block autoplay unless the video is muted.

Between them these tasks cover Video playback, poster and muted autoplay.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.