Embedding Video on a Website

May 24, 2026

Jump to Section:

HTML Lesson 8: Embedding Video on a Website
Insert audio
Embed video
Favicon
HTML 5: Semantic Tags

⏱️ Estimated Reading Time: ~6 min read

HTML Lesson 8: Embedding Video on a Website

Lesson Objective: How to embed video and audio in HTML and file formats

Insert audio

Audio file formats:

mp3 and mp4
wav
ogg

To embed an audio player, use the following code:

audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
In the Google Chrome browser, the player will look like this:
audio player

<audio> Player tag attributes :

Attribute	Meaning	Description
autoplay	autoplay	Specifies that the audio should start playing as soon as it is ready.
controls	controls	Specifies that playback controls should be displayed.
loop	loop	Specifies that the audio should restart when it finishes.
preload	auto metadata none	Determines whether the audio should be loaded when the page loads.
src	URL	Specifies the address of the audio to play.

Other options for embedding audio on your website

<a href="filename.mp3">Click</a>

HTML

<audio src="04.wav" autoplay loop id="bg-audio"></audio>

<script>
  const audio = document.getElementById('bg-audio');
  let loopCount = 0;
  
  audio.addEventListener('ended', () => {
    loopCount++;
    if (loopCount < 5) {
      audio.play();
    }
  });
</script>

*only for formats: wav, mp3, aiff, wma

HTML

<audio controls width="180" height="150">
  <source src="filename.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

Embed video

Video file format:

MP4
WebM
Ogg

HTML

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

Result in browser:

365

<video> Player tag attributes :

Attribute	Meaning	Description
audio	muted	Specifies the default sound state. Currently, only “muted” is allowed.
autoplay	autoplay	If specified, the video will start playing as soon as it is ready.
controls	controls	If specified, control buttons will be shown, such as the play button.
height	pixels	Specifies the height of the video player.
loop	loop	If specified, the video will start playing again once it finishes.
poster	URL	Specifies the URL of an image representing the video.
preload	auto metadata none	If specified, the video will be loaded when the page loads and is ready to play. Ignored if “autoplay” is specified.
src	URL	URL address of the video to play
width	pixels	Specifies the width of the video player.

Example:

<video src="04.avi" loop muted></video>

Another option for inserting video (without a player):

HTML

<a href="filename.avi">Click to watch</a> 
<!-- Example: 
<a href="ocean.qt">1 MB video clip</a> -->

* for MPEG, AVI formats

Favicon

A favicon appears in the browser’s address bar before the page’s URL. You can also see the favicon in the page’s browser tab. Search engines display the favicon along with their search results.

Files with the .ico extension,
size 16×16 pixels

Service for conversion to ICO format: http://image.online-convert.com/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

</body>
</html>

HTML 5: Semantic Tags

Semantic tags typically carry semantic meaning and have no external HTML formatting. However, they can and should be styled with CSS. These tags are important for code readability and influence search engine rankings.
Let’s look at examples of semantic tags and their use:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heading</title>
</head>
<body>

    <header>
        <p>The header element contains information that appears as the site's title. This is usually a company logo and sometimes additional site navigation.</p>
        <nav>
            <p>nav (short for navigation) element - typically represents a horizontal menu for navigating to specific parts of a website.</p>
        </nav>
    </header>

    <main>
        <h1>Main page heading</h1>

        <section>
            <h2>Section 1</h2>
            <article>
                <h3>Article 1</h3>
            </article>
            <article>
                <h3>Article 2</h3>
            </article>
            <article>
                <h3>Article 3</h3>
            </article>
        </section>

        <section>
            <h2>Section 2</h2>
            <article>
                <h3>Article 4</h3>
            </article>
            <article>
                <h3>Article 5</h3>
            </article>
            <article>
                <h3>Article 6</h3>
            </article>
            <div>Regular div, block element</div>
        </section>

        <aside>
            <p>ASIDE - some information related to the topic of the page.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 365education.org. All rights reserved.</p>
    </footer>

</body>
</html>

Assignment: Format sections of your completed essay or coursework on a web page using semantic tags. Chapters are tagssection, and subchapters are tags article. Don’t insert large sections of text; several paragraphs per subsection are sufficient. All semantic tags must be used.

Embedding Video on a Website

HTML Lesson 8: Embedding Video on a Website

Insert audio

Other options for embedding audio on your website

Embed video

Favicon

HTML 5: Semantic Tags

Explore More IT Terms

#

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

Y

RELATED ARTICLES

Leave a Reply Cancel reply