Syllabus

HTML Video Embedding (Native Player)

Badar KhalilUpdated September 27, 2026 2 min read

HTML Video Embedding with the Native Player

The HTML video tag (our focus keyword) — <video> — is the standard way to embed self-hosted video content directly in a webpage, without Flash or a third-party plug-in. It ships with a built-in player UI (play/pause, volume, fullscreen, scrubber) that every modern browser renders natively, making it fast, secure, and mobile-friendly.

Basic Syntax

At minimum, the video tag needs a src (or nested <source> tags) and the controls attribute so users can interact with it:

Code

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

Key Attributes

controls — shows the native play/pause/volume UI.
autoplay — starts playback automatically (most browsers require muted alongside this for autoplay to work).
loop — replays the video automatically when it ends.
muted — starts the video with sound off.
poster — an image shown before playback starts.
preload — hints whether the browser should preload none, metadata, or the full video.
width / height — sets the player's display dimensions.

Multiple Sources for Cross-Browser Compatibility

Not every browser supports every video codec. The safest, most future-proof approach — a trending best practice — is to nest several <source> elements inside <video>, ordered from most to least preferred, so the browser automatically plays the first format it can decode.

Captions and Accessibility with <track>

Adding a <track> element with a WebVTT (.vtt) file provides captions or subtitles, which is essential for accessibility compliance (WCAG) and also helps with SEO since search engines can index caption text.

Responsive Video

To make video scale fluidly on any screen size, set width: 100%; height: auto; in CSS, or wrap the video in a container with a fixed aspect ratio using the modern aspect-ratio CSS property.

Controlling Video with JavaScript

The HTMLMediaElement API exposes methods like play(), pause(), and properties like currentTime and volume, letting you build fully custom player controls in JavaScript.

Try it Yourself HTML

<video width='640' height='360' controls poster='thumbnail.jpg' preload='metadata'>
  <source src='demo.mp4' type='video/mp4'>
  <source src='demo.webm' type='video/webm'>
  <track src='captions_en.vtt' kind='captions' srclang='en' label='English' default>
  Sorry, your browser does not support embedded videos.
</video>

Output

Press Run to execute.

Try it Yourself CSS

/* Make the video scale responsively inside any container */
video {
  width: 100%;
  height: auto;
  max-width: 800px;
  border-radius: 8px;
}

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

// Build simple custom controls using the HTMLMediaElement API
const vid = document.querySelector('video');
const playBtn = document.getElementById('playBtn');

playBtn.addEventListener('click', () => {
  if (vid.paused) {
    vid.play();
    playBtn.textContent = 'Pause';
  } else {
    vid.pause();
    playBtn.textContent = 'Play';
  }
});

vid.addEventListener('timeupdate', () => {
  console.log('Current time:', vid.currentTime.toFixed(1), 's');
});

Output

Press Run to execute.

Exercise: Build a Responsive Video PlayerHTML

Create a <video> element that includes: two <source> tags (mp4 and webm), a poster image, the controls attribute, and CSS so the video is fully responsive (100% width, auto height).

Try it Yourself HTML

<video>
  <!-- add your source tags here -->
</video>

<style>
/* add responsive CSS here */
</style>

Output

Press Run to execute.

Show expected output

A <video> tag with controls, poster, two <source> children, and CSS setting width:100%; height:auto;

This is a self-check — compare your result with the expected output above.

Was this page helpful?