Skip to main content

HTML Embeds and Comments

HTML can be used to embed videos, maps and other content into a webpage.

Comments can also be added to help explain code without displaying anything on the page.

HTML Comments

Comments are ignored by the browser.

They are useful for explaining code and leaving notes for yourself or other developers.

<!-- This is a comment -->

Example:

<!-- Navigation Menu -->

<nav>

</nav>

Comments are not visible on the webpage.

Embedding a YouTube Video

YouTube provides embed code for videos.

Example:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/W-Q7RMpINVo"
    allowfullscreen>

</iframe>

Result:

A YouTube video displayed on the page.

Responsive YouTube Videos

To help videos work on phones and tablets:

<iframe
    width="100%"
    height="315"
    src="https://www.youtube.com/embed/W-Q7RMpINVo"
    allowfullscreen>

</iframe>

The video will automatically adjust to the available width.

Embedding a Google Map

Google Maps can also be embedded.

Example:

<iframe
    src="https://www.google.com/maps/embed..."
    width="600"
    height="450">

</iframe>

Result:

An interactive map displayed on the page.

Displaying a Video File

Videos stored in your project can be displayed using the video element.

<video
    width="600"
    controls>

    <source
        src="videos/demo.mp4"
        type="video/mp4">

</video>

Result:

A video player with play and pause controls.

Displaying Audio Files

Audio can be embedded using the audio element.

<audio controls>

    <source
        src="audio/music.mp3"
        type="audio/mpeg">

</audio>

Result:

An audio player with playback controls.

Displaying PDF Files

PDF documents can be embedded directly into a webpage.

<iframe
    src="files/document.pdf"
    width="100%"
    height="600">

</iframe>

Result:

The PDF document is displayed inside the webpage.

Common Uses for Embeds

Embeds are commonly used for:

  • YouTube videos
  • Google Maps
  • PDF documents
  • Audio players
  • Demonstration videos
  • Interactive content

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Embeds Example</title>
</head>

<body>

    <h1>Media Examples</h1>

    <!-- YouTube Video -->

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/W-Q7RMpINVo"
        allowfullscreen>

    </iframe>

    <br><br>

    <!-- Audio Player -->

    <audio controls>

        <source
            src="audio/music.mp3"
            type="audio/mpeg">

    </audio>

</body>

</html>

Quick Reference

Comment

<!-- Comment -->

YouTube Video

<iframe>

Google Map

<iframe>

Video File

<video>

Audio File

<audio>

PDF

<iframe src="document.pdf">

You now know how to embed media and add comments in HTML.

Next chapter: CSS Reference

Back to top