TestMu Conference is Back! Future of Testing + AI LambdaTest G2 Announcement

Continuous Test Orchestration And Execution Platform Online

Perform automated and live-interactive testing on 3000+ real desktop and mobile devices online.

What is an iframe?

An iFrame (inline frame) is an HTML element that lets you render a third-party HTML page from your HTML document. iFrames are frequently used for adding external advertisements, YouTube videos, tags, external photographs, a map to your "Contact Us" page, or any other action that enhances and engages viewers with your content.

To include an iframe in your current document, the <iframe> tag is used with commonly used attributes like src, title, width, height, etc.

The syntax for using iframe is as follows:

<iframe src="https://jainish-patel.vercel.app/" title="Iframe Example" width="100%" height="700" style="border: 1px solid black"></iframe>

The most common use case of iframe is embedding YouTube videos on the website. It can be done as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Iframe Example</title>
  </head>
  <body>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/HpL6EX2kjq4?si=1NQaRdrDTh7wFa_c"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </body>
</html>

Output:

iFrames deals with content from a third party over which you have no control. Thus increasing the risk of having a potential vulnerability in your application or simply having to deal with a bad user experience (like annoying video autoplay). These issues can be tackled by blocking or allowing specific features with attributes like sandbox (Enables an extra set of restrictions for the content) and allow (Specifies a feature policy).

Also read: How To Handle Frames & iFrames in Selenium JavaScript.