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.
HTML Iframes
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>
- Replace "https://www.example.com" with the URL of the external website you want to embed.
- The width and height attributes specify the dimensions of the iframe in pixels.
- The 'style="border:0;"' attribute removes the border around the iframe.
Embedding a PDF Document:
<iframe src="path/to/folder/document.pdf" width="800" height="600" style="border:0;"></iframe>
- Replace "path/to/folder/document.pdf" with the actual path or URL of the PDF document you want to embed.
- The width and height attributes specify the dimensions of the iframe in pixels.
- The ' style="border:0;" ' attribute removes the border around the iframe.
- Ensure that the PDF document is accessible and its path is correctly specified.
Embedding an Audio File:
<iframe src="path/to/folder/audio.mp3" width="300" height="50" style="border:0;"></iframe>
- Replace "path/to/folder/audio.mp3" with the actual path or URL of the audio file you want to embed.
- The width attribute determines the width of the iframe.
- The height attribute determines the height of the iframe.
- The ' style="border:0;" ' attribute removes the border around the iframe.
- Ensure that the audio file is accessible and its path is correctly specified.
Embedding a YouTube Video
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
- Replace "VIDEO_ID" with the actual YouTube video ID you want to embed.
- The 'width' and 'height' attributes specify the dimensions of the iframe in pixels.
- The 'src' attribute contains the URL of the video you want to embed.
- The ' frameborder="0" ' attribute removes the border around the iframe.
- The 'allowfullscreen' attribute enables the video to be played in fullscreen mode.
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>
- Replace "VIDEO_ID" with the actual Vimeo video ID you want to embed.
- The 'width' and 'height' attributes specify the dimensions of the iframe in pixels.
- The 'src' attribute contains the URL of the video you want to embed.
- The ' frameborder="0" ' attribute removes the border around the iframe.
- The 'allow' attribute specifies the permissions for the video, such as autoplay, fullscreen, and picture-in-picture.
- The 'allowfullscreen' attribute enables the video to be played in fullscreen mode.
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>
- Replace "https://twitter.com/TwitterDev" with the URL of the Twitter profile or tweet you want to embed.
- The 'width' and 'height' attributes specify the dimensions of the iframe in pixels.
- The ' style="border:0;" ' attribute removes the border around the iframe.
- In this example, the URL is passed through the Twitframe service, which helps embed Twitter timelines in a customizable manner.
- You can adjust the width, height, and theme (light or dark) based on your preference or website design.
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;
}
- The CSS code within the iframestyles.css file defines a class called "custom-iframe" with various styles applied.
- The border: none; removes the border around the iframe.
- The width and height properties set the dimensions of the iframe to 600px width and 400px height.
- The border-radius: 10px; creates rounded corners for the iframe.
- The box-shadow property adds a subtle shadow effect to the iframe.
- The background-color property sets the background color of the iframe to #f2f2f2 (light gray).
- The iframe is then included in the HTML using the <iframe> tag with the class " custom-iframe" applied.
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>
- Replace "YOUR_LATITUDE" and "YOUR_LONGITUDE" with the desired location's latitude and longitude coordinates.
- Adjust the "YOUR_ZOOM_LEVEL" to set the initial zoom level of the map (higher values represent closer zoom).
- Modify the "YOUR_ROTATION" and "YOUR_TILT" parameters to set the rotation and tilt of the map view.
- Update "YOUR_MARKER_LATITUDE" and "YOUR_MARKER_LONGITUDE" to add a marker at a specific location.
- The 'width' and 'height' attributes specify the dimensions of the iframe in pixels.
- The ' style="border:0;" ' attribute removes the border around the iframe.
- The 'allowfullscreen' attribute allows the map to be viewed in fullscreen mode.
- The ' loading="lazy" ' attribute enables lazy loading of the 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>
- Replace the 'data-href' attribute value with the URL of the specific Facebook post you want to embed.
- Adjust the 'data-width' attribute to set the desired width of the embedded post.
- The ' data-show-text="true" ' attribute indicates that the post should display the text content.
- Customize the <p> tag content within the <blockquote> tag to add a description or additional text.
- Modify the <a> tags within the <blockquote> tag to change the linked text and URLs as appropriate.
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.
×