Embedded Content

7.1 <iframe> Element

The <iframe> element in HTML is used to embed another HTML document within the current document. It lets you display content from other web pages inside the main document, making it possible to integrate various resources like videos, maps, documents, and other web pages.

The <iframe> element creates an embedded frame that can display another HTML document. This document can be loaded from any URL and functions independently from the main document.

Syntax:

    
      <iframe src="URL"></iframe>
    
  

Usage example:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Sample iframe"></iframe>
    
  

Attributes

• src: The URL of the document that will be loaded in the <iframe>
• width: The width of the frame (can be specified in pixels or percentages)
• height: The height of the frame (can be specified in pixels or percentages)
• title: A brief description of the frame's content (important for accessibility)
• name: The name of the frame, which can be used for targeting links and forms
• sandbox: Sets restrictions on the frame's content to enhance security
• allow: Defines which features can be used in the <iframe> (e.g., allowfullscreen for fullscreen mode)

7.2 The allowfullscreen Attribute

The allowfullscreen attribute enables fullscreen mode for content loaded in an <iframe>. Without this attribute, the content cannot enter fullscreen mode.

Syntax:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Usage Example:

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

Fullscreen mode lets the user view videos or other resources in a fullscreen mode, enhancing user experience.

7.3 The allow Attribute

The allow attribute specifies which features can be used in the <iframe>, such as access to geolocation, camera, microphone, and fullscreen mode.

Syntax:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Usage Example:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Advantages:

• Control over functionality: Allows you to specify which features and APIs can be used by the embedded content
• Permission management: Provides flexibility in managing access to various features like geolocation and camera

7.4 The sandbox Attribute

The sandbox attribute is used to apply restrictions to the content loaded in the <iframe>. It prevents certain actions like executing scripts or opening pop-up windows, thereby enhancing security.

Syntax:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Sandbox Attribute Values:

• allow-forms: Allows form submission
• allow-modals: Allows the use of modal windows
• allow-orientation-lock: Allows screen orientation lock
• allow-pointer-lock: Allows pointer capture
• allow-popups: Allows pop-up windows
• allow-popups-to-escape-sandbox: Allows pop-ups to escape the sandbox
• allow-presentation: Allows access to presentation APIs
• allow-same-origin: Allows scripts from the same origin
• allow-scripts: Allows script execution
• allow-storage-access-by-user-activation: Allows storage access on user activation
• allow-top-navigation: Allows top-level navigation
• allow-top-navigation-by-user-activation: Allows top-level navigation on user activation

Usage Example:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Advantages:

• Security: Prevents the execution of potentially harmful scripts and restricts the functionality of embedded content
• Access control: Allows developers to precisely specify which features are allowed for embedded content

7.5 The loading Attribute

The loading attribute manages how the <iframe> is loaded, allowing you to defer loading until the element becomes visible on the screen (lazy loading).

Loading Attribute Values:

• lazy: Defers loading the <iframe> until the element becomes visible
• eager: Loads the <iframe> immediately, regardless of its visibility

Syntax:

    
      loading="status"
    
  

Usage Example:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Advantages:

• Performance optimization: Lazy loading reduces the amount of data loaded and speeds up page load times
• Resource saving: Loads only the elements that users actually see and use

1

Task

Frontend SELF EN, level 11, lesson 1

Locked

Embedding a Page

Embedding a Page

Open

1

Task

Frontend SELF EN, level 11, lesson 1

Locked

Embedding a Video

Embedding a Video

Open