Embedding external content allows you to incorporate various types of media and information from other websites directly into your HTML pages. This can enhance user experience and provide richer content. Common examples include embedding videos, maps, and interactive elements from third-party services.
HTML Embedding External Content Syntax
Explanation of Syntax:
<iframe>: This tag is used to embed another HTML page or external content within your webpage.src: The URL of the external content you want to embed.widthandheight: Define the dimensions of the embedded content.frameborder="0": Specifies whether to display a border around the iframe (0 means no border).allowfullscreen: Allows the embedded content to be viewed in full-screen mode.
<!--YOUTUBE VIDEO SYNTAX SAMPLE--> <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<!--GOOGLE MAPS SYNTAX SAMPLE--> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.502114242906!2d-122.41941518468108!3d37.7749292797597!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858185a57d59d3%3A0x4d8b20f6de07a3db!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1614576735065!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
HTML Embedding External Content Example Code
Explanation of Code:
- The code starts with the standard HTML structure, including the
<head>and<body>sections. <h1>and<h2>: Headings are used to organize content, indicating sections for the video and map.- The YouTube video and Google Map are embedded using
<iframe>elements with appropriate attributes to specify dimensions and functionality. - You can easily embed content by copying the embed code directly from YouTube and Google Maps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedding External Content</title>
</head>
<body>
<h1>Embedding External Content</h1>
<h2>Watch this Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0xrWMpjOGcE?si=EdJ0Z5ejFXjq1W2b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h2>Find Us on the Map</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d16013003.389548266!2d111.91393070398475!3d11.521364971769351!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x324053215f87de63%3A0x784790ef7a29da57!2sPhilippines!5e0!3m2!1sen!2sph!4v1728876760801!5m2!1sen!2sph" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></body>
</html>