# 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.

```html
<!-- This is a comment -->
```

Example:

```html
<!-- Navigation Menu -->

<nav>

</nav>
```

Comments are not visible on the webpage.



---

## Embedding a YouTube Video

YouTube provides embed code for videos.

Example:

```html
<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/W-Q7RMpINVo"
    allowfullscreen>

</iframe>
```

Result:

A YouTube video displayed on the page.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    allowfullscreen>

</iframe>

---

## Responsive YouTube Videos

To help videos work on phones and tablets:

```html
<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:

```html
<iframe
    src="https://www.google.com/maps/embed..."
    width="600"
    height="450">

</iframe>
```

Result:

An interactive map displayed on the page.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3520.366280272018!2d153.37404667577476!3d-28.07436817597404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b911cb972c15b2f%3A0xc34ef94511e30812!2sRobina%20State%20High%20School!5e0!3m2!1sen!2sau!4v1781436815960!5m2!1sen!2sau" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

---

## Displaying a Video File

Videos stored in your project can be displayed using the `video` element.

```html
<video
    width="600"
    controls>

    <source
        src="videos/demo.mp4"
        type="video/mp4">

</video>
```

Result:

A video player with play and pause controls.

<video width="600" controls>
<source src="videos/demo.mp4" type="video/mp4">
</video>

---

## Displaying Audio Files

Audio can be embedded using the `audio` element.

```html
<audio controls>

    <source
        src="audio/music.mp3"
        type="audio/mpeg">

</audio>
```

Result:

An audio player with playback controls.

<audio controls><source src="audio/music.mp3" type="audio/mpeg"></audio>

---

## Displaying PDF Files

PDF documents can be embedded directly into a webpage.

```html
<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

```html
<!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

```html
<!-- Comment -->
```

### YouTube Video

```html
<iframe>
```

### Google Map

```html
<iframe>
```

### Video File

```html
<video>
```

### Audio File

```html
<audio>
```

### PDF

```html
<iframe src="document.pdf">
```

You now know how to embed media and add comments in HTML.

Next chapter: **CSS Reference**