# iframe

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

## File Location

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

```
    javascript-library
        └── 0-PreWork
            └── 1-HTML-Basics

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

            └── 2-CSS-Basics
            └── 3-JavaScript-Basics
            └── 4-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/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-100-prework-gitbook/javascript-library/0-prework/2-html-basics/iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
