search

Embedding Videos and Audio

Embedding videos and audio in HTML is straightforward and done using the <video> and <audio> tags. These tags allow you to include media directly in your webpage with support for various controls like play, pause, and volume adjustment.

hashtag
Embedding Videos in HTML

To embed a video, you use the <video> tag. You can specify various attributes, including controls, autoplay, loop, muted, width, and height.

hashtag
Basic Structure for a Video

<video src="path-to-video.mp4" controls>
  Your browser does not support the video tag.
</video>

hashtag
Example 1: Embedding a Local Video

<video src="myVideo.mp4" width="600" height="400" controls>
  Your browser does not support the video tag.
</video>

hashtag
Example 2: Video with Multiple Source Formats

To ensure compatibility across browsers (since not all browsers support the same video formats), you can provide multiple video sources using the <source> tag.

<video width="600" height="400" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

hashtag
Example 3: Autoplay and Loop

You can make the video autoplay when the page loads and loop it indefinitely:

  • autoplay: Starts the video automatically.

  • loop: Replays the video in a loop.

  • muted: Mutes the audio by default (required for autoplay to work in most browsers).

hashtag
Example 4: Embedding a YouTube Video

If you want to embed a YouTube video, use an <iframe> tag:

Replace VIDEO_ID with the actual ID of the YouTube video.

hashtag
Embedding Audio in HTML

To embed audio, you use the <audio> tag. Just like with videos, you can control playback options with attributes like controls, autoplay, loop, and muted.

hashtag
Basic Structure for Audio

hashtag
Example 1: Embedding a Local Audio File

hashtag
Example 2: Audio with Multiple Source Formats

Similar to videos, providing multiple audio sources ensures compatibility with various browsers.

hashtag
Example 3: Autoplay and Loop

To have the audio play automatically and loop continuously:

  • autoplay: Automatically starts the audio.

  • loop: Plays the audio in a loop.

hashtag
Full Example with Video and Audio

hashtag
Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

PreviousAdding Images to a WebpageNextCreating Lists

Last updated