Questions
2 of 12
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
How can we embed video in HTML?
Difficulty: 3/10
HTML <video> element, format fallback, accessibility
Embedding Video in HTML
In HTML, the <video> element is used to embed video files directly into a web page. It allows users to play videos without needing external plugins like Flash.
Key Points about <video>
- 1
The
<video>tag supports attributes likecontrols,autoplay,loop,muted, andposter(to show a thumbnail before playing). - 2
Common video formats supported are MP4, WebM, and Ogg.
- 3
The
<source>tag inside<video>allows providing multiple file formats for better browser compatibility. - 4
If the browser doesn’t support the
<video>element, fallback text or links can be displayed.
Example Usage
In short: The <video> element lets you embed and control video playback directly in your web pages.
Scenario Questions
0-2 years experience
- 1We need to add a product demo video to a landing page. How would you embed an MP4 video using HTML so it plays inline on most browsers?
- 2If a user’s browser doesn’t support the <video> tag, what fallback would you provide in the markup?
2-5 years experience
- 1Our marketing team gave you a WebM version of a video and an MP4 version. How would you structure the <video> element to serve the appropriate format and also provide a poster image?
- 2During QA you notice the video controls are not appearing on iOS Safari. Walk me through how you’d debug and fix the issue.
5-8 years experience
- 1We’re planning to serve thousands of concurrent video streams from our site. What considerations would you make around the HTML markup, CDN selection, and progressive enhancement to ensure performance and accessibility?
- 2Our legacy pages use <object> tags for video. How would you migrate them to modern <video> usage while minimizing impact on SEO and analytics?
8+ years experience
- 1Our product is moving from hosted MP4 files to an adaptive streaming solution (HLS/DASH). How would you redesign the video embedding strategy across the front‑end architecture, including fallback for older browsers and coordination with the backend team?
- 2We have multiple teams that embed videos in different ways, leading to inconsistent accessibility and analytics. Propose a reusable component or library strategy, governance, and rollout plan.
Follow-up Questions
- What attributes would you add to improve SEO for the video?
- How do you handle autoplay restrictions on mobile browsers?
- Which browsers would you test on and why?