HTML Iframe

An <iframe> (Inline Frame) is an HTML element used to embed external content, such as web pages or multimedia, within another HTML document. It provides a way to display content from a different source while keeping it isolated from the rest of the page.

Here's a detailed guide on using the <iframe> element:
  1. Basic <iframe> Structure:
    • The basic syntax of an <iframe> element includes the src attribute, specifying the source URL of the content to be embedded.
    <iframe src="https://www.example.com"></iframe>
  2. Specifying Dimensions:
    • You can set the width and height of the <iframe> using the width and height attributes. 
    <iframe src="https://www.example.com" width="600" height="400"></iframe>

  3. Alternative Content:
    • The content within the <iframe> tag serves as fallback in case the browser doesn't support iframes or if the specified content cannot be loaded.
    Example:- 
     <iframe src="https://www.example.com">
    <!-- Alternative content -->
    <p>Your browser does not support iframes.</p>
</iframe>
  4. Seamless Attribute:
    • The seamless attribute (deprecated) was used to remove the default border around the iframe, making it visually integrated with the surrounding content.
    <iframe src="https://www.example.com" seamless></iframe>
  5. Controlling Loading Behavior:
    • You can control when the iframe content is loaded using the loading attribute.
    <iframe src="https://www.example.com" loading="lazy"></iframe>
    • The loading attribute can take values such as "auto", "lazy", or "eager".

  6. Embedded PDF Example:
    • Embedding a PDF file within an iframe.
    <iframe src="example.pdf" width="600" height="400"></iframe>
Example:- 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/8339NLKAdcw?si=5s0IxH-ZfEW0kjhp" 
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
    gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>

Output:-