start learning
Image 1
32021

HTML Iframes

HTML iframes are a powerful way to embed external content within a web page. An iframe creates a window through which external content from another website or source can be displayed seamlessly within your own site.

By using iframes, you can display a wide range of content types, including videos, maps, social media feeds, or entire websites, on your own pages. With proper implementation, iframes can enhance the functionality and interactivity of your web pages.

Here is a step-by-step example of using Iframes in your html code :

You can use our free live html editor to test tutorial codes .


Embedding an External Website


<iframe src="https://www.example.com" width="800" height="600" style="border:0;"></iframe>


Embedding a PDF Document:


<iframe src="path/to/folder/document.pdf" width="800" height="600" style="border:0;"></iframe>


Embedding an Audio File:


<iframe src="path/to/folder/audio.mp3" width="300" height="50" style="border:0;"></iframe>


Embedding a YouTube Video


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


Embedding a Vimeo Video


<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>


embedding a Twitter timeline


<iframe src="https://twitframe.com/show?url=https://twitter.com/TwitterDev&theme=light" width="500" height="400" style="border:0;"></iframe>


HTML iframe with custom CSS styling


    <!DOCTYPE html>
<html>
<head>
<title>Iframe Page</title>
<link rel="stylesheet" type="text/css" href="iframestyles.css">
</head>
<body>
  <iframe class="custom-iframe" src="https://www.Bibiser.com"></iframe>
  <!-- bibiser as example , change it too feet your need -->
  </body>
  </html>

    .custom-iframe {
      border: none;
      width: 600px;
      height: 400px;
      border-radius: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      background-color: #f2f2f2;
    }

Iframe Preview:


Embedding a Google Map


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12
!1m3!1dYOUR_LATITUDE!2dYOUR_LONGITUDE!3dYOUR_ZOOM_LEVEL!4dYOUR_ROTATION!
5dYOUR_TILT!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1sYOUR_MARKER_LATITUDE!2sYOUR_MARKER_LONGITUDE!5e0!3m2!1sen!2sus!
4v1621030069781!5m2!1sen!2sus" width="600" height="450" 
style="border:0;" allowfullscreen="" loading="lazy">
</iframe>


Embedding a Facebook content


<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="YOUR_NONCE_VALUE"></script>
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10159167752653553" data-width="500" data-show-text="true">
<blockquote cite="https://www.facebook.com/FacebookDevelopers/posts/10159167752653553" class="fb-xfbml-parse-ignore">
<p>Here's a Facebook post embedded on the webpage.</p>Posted by <a href="https://www.facebook.com/facebookapp" target="_blank">Facebook App</a>
on <a href="https://www.facebook.com/FacebookDevelopers/posts/10159167752653553" target="_blank">Thursday, May 13, 2023</a></blockquote></div>

Remember to replace "YOUR_NONCE_VALUE" with an actual nonce value to enhance security. Additionally, keep in mind that Facebook's embedding options and features may change over time, so it's recommended to refer to the Facebook developer documentation for the most up-to-date methods and guidelines for embedding Facebook content on your website.

×