Embedding Video files in an HTML Document

  • Last updated Apr 25, 2024

Video content captures attention more effectively than text or images alone. It allows for dynamic storytelling and provides a visual experience that resonates with viewers. They can convey complex information more comprehensively than written text. High-quality videos encourage users to spend more time on your website, positively influencing metrics like dwell time, which search engines consider in their ranking algorithms. HTML provides a <video> element for embedding video files.

Here's a basic example of embedding video files in an HTML document:

<video controls width="650" height="400">
   <source src="video-file.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>
  • The controls attribute adds play, pause, and volume controls.
  • You can adjust the width and height attributes to set the video dimensions.
  • The <source> element specifies the video file and its type.
Supported Video Formats

Different browsers support different video formats. To ensure broad compatibility, include multiple <source> elements with various formats. For example:

<video controls width="600" height="400">
   <source src="video-file.mp4" type="video/mp4">
   <source src="video-file.webm" type="video/webm">
   Your browser does not support the video tag.
</video>