> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/dotnet-100-prework-gitbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/dotnet-100-prework-gitbook/part-1-html-fundamentals/iframes.md).

# iFrames

In this module we wil learn about the `<iframe>` tag.

## File Location

For this module, you should be working in the following location:

```
    DotNetProjects
        └── HTMLCSSPreWork
            └── 1-HTML-Basics

                14-iframe.html <---You should be here.

            └── 2-CSS-Basics
            └── 3-assets
```

## Description

The inline frame (iframe) is used to embed another document inside of an HTML document. This is a fairly straight-forward way to describe the `<iframe>`, and that is because it is a fairly straight-forward element to use in practice. Embedding third-party media is a common use of `<iframe>` and we'll show you how to insert a YouTube video into your own HTML using this tag.

## Sample Code

Add the following sample code to your file:

```markup
<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>       

</body>
</html>
```

## Discussion

It may seem strange that this isn't a void element, similar to the `<img />` tag, but that is explained readily enough: compatibility with legacy versions of web browsers. If you've already tried to insert text between the opening/closing tags, you probably noticed that the text doesn't appear when the document is rendered. This is because the browser simply ignores that content. `<iframe>` can still be styled, as we have done above with the `width` and `height` attributes. However, you'll want to consider how your styling may be rendered on a variety of devices.

## Challenge

Try changing the `src` attribute to a different target. How does that affect your layout? Practice changing the `width` and `height` using values such as percentages (i.e. width="20%").

## Extra Reading

Resources: <http://html.com/tags/iframe/>