Embedding External Media (<iframe>)
The <iframe> tag allows embedding external content like YouTube videos, Google Maps, or other websites.
- Embedding YouTube / Vimeo videos
- Displaying Google Maps location
- Showing external websites
Example (YouTube Video Embed):
<h2>Embedded YouTube Video</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/K4evu-L0teQ?rel=0&modestbranding=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy">
</iframe>
Output :
Making the Iframe Responsive :
To make the iframe fit any screen size, wrap it in a container with CSS:
Example :
<style>
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=K4evu-L0teQ"
title="YouTube video player"
frameborder="0"
allowfullscreen
loading="lazy">
</iframe>
</div>