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>

Embedding External Media (<iframe>)

Making the Iframe Responsive :

Embedding External Media (`<iframe>`)