Video tag basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this video tag display?

Look at this HTML code for a video. What will you see in the browser?

HTML

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

A A video player with controls that plays movie.mp4 if supported.

B Just the text 'Your browser does not support the video tag.' with no video player.

C A blank box with no controls or video.

D An error message displayed by the browser.

💡 Hint

Think about what the

The

📝 Syntax

intermediate

Which option correctly adds autoplay to a video?

You want the video to start playing automatically when the page loads. Which code snippet does this correctly?

A

<video controls autoplay="true">
  <source src="clip.mp4" type="video/mp4">
</video>

B

<video autoplay controls>
  <source src="clip.mp4" type="video/mp4">
</video>

C

<video controls autoplay="autoplay">
  <source src="clip.mp4" type="video/mp4">
</video>

D

<video controls autoplay="yes">
  <source src="clip.mp4" type="video/mp4">
</video>

💡 Hint

The autoplay attribute is a boolean attribute in HTML5.

In HTML5, boolean attributes like autoplay do not need a value. Just writing autoplay is enough. Adding values like 'true' or 'yes' is not standard and may not work.

❓ accessibility

advanced

How to make a video accessible for screen readers?

Which option best improves accessibility for a video element so screen readers understand it?

A Add an alt attribute with a description of the video.

B Add a longdesc attribute with a link to a transcript.

C Add a title attribute with the video file name.

D Add a <track> element with kind="captions" and a label describing the captions.

💡 Hint

Think about how captions help deaf or hard-of-hearing users.

The element with kind="captions" provides subtitles for the video, which screen readers and users with hearing difficulties can use. The alt attribute is not valid on

❓ layout

advanced

How to make a video responsive using CSS?

You want the video to resize nicely on different screen sizes. Which CSS snippet achieves this?

HTML

<video controls src="sample.mp4"></video>

A video { width: 100%; height: auto; max-width: 600px; }

B video { width: 600px; height: 400px; }

C video { max-width: 100%; height: 100%; }

D video { width: auto; height: auto; }

💡 Hint

Think about keeping the video width flexible but not too large.

Setting width to 100% and height to auto makes the video scale with its container width while keeping the aspect ratio. max-width limits the maximum size on large screens.

🧠 Conceptual

expert

What happens if multiple tags are used inside a video?

Consider this code snippet: What is the browser's behavior?

A The browser randomly picks one source to play.

B The browser plays all sources one after another automatically.

C The browser tries to play the first supported source in order and ignores the rest.

D The browser shows an error because multiple sources are not allowed.

💡 Hint

Think about how browsers handle different video formats for compatibility.

Browsers check each in order and use the first one they support. This allows providing multiple formats for better compatibility.