iframes

The "< iframe >" (Inline Frame) element is used to embed an independent HTML document within another HTML document.

It allows us to display content from one web page (the "embedded" or "child" page) within a container on another web page (the "parent" page).

`iframe` is commonly used to embed videos, maps, documents, or other external content seamlessly into a web page.

<iframe> element:

<iframe src="Iframe URL" width="width" 
  height="height" frameborder="0" allowfullscreen>
</iframe>

src attribute: Specifies the URL of the content to be embedded. This can be a web page, video, or any other web resource.
width and height attributes: Define the dimensions of the iframe.
frameborder attribute: Specifies whether or not to display a border around the iframe. Typically set to 0 for no border.
allowfullscreen attribute: Enables the iframe to be displayed in fullscreen mode if applicable (e.g., for embedded videos).

Iframe Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embedding an iframe</title>
</head>
<body>
  <h1>Web Page with Iframe</h1>

  <!-- Example: Embedding a YouTube video -->
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen
  ></iframe>

  <!-- Other content on the web page -->

</body>
</html>

an `iframe` is used to embed a third-party, self-hosted or YouTube video. We just need to replace "VIDEO_ID" with the actual video ID from a different destination location.

The width and height attributes define the dimensions of the iframe, and allowfullscreen allow the video to be viewed in fullscreen mode.

<-- CSS in HTML

File Path -->