How to make iframe Responsive in Bootstrap ?

Last Updated : 07 Mar, 2024

When embedding external content, such as videos, maps, or other web pages, into the website, we often use an iframe. However, iframes can be tricky to handle when it comes to responsiveness across various devices and screen sizes. We will create a responsive iFrame with the help of Bootstrap.

Approach

In this approach, we are using Bootstrap’s Embed Responsive Classes. Bootstrap provides embed-responsive classes to make embedded content, including iframes, responsive. You can use classes like embed-responsive and embed-responsive-16by9 to maintain aspect ratios. Also, the embed-responsive-item class is applied to the iframe element within the .embed-responsive container. It ensures that the iframe maintains the aspect ratio specified by the parent container.

Syntax:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="video url" allowfullscreen></iframe>
</div>

Note: 16by9 is the aspect ratio of the content which can be 21by9, 4by3, or 1by1 as well.

Example: embed-responsive class is used for creating responsive embeds, such as videos or iframes. It maintains the aspect ratio of the content regardless of the screen size and the embed-responsive-4by3 class specifies the aspect ratio of the embedded content.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
</head>
 
<body>
    <h1 class="text-center text-success">GeeksforGeeks</h1>
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="h-50 embed-responsive-item"
                src="https://www.youtube.com/embed/zbBALFXGy4Y"
            allowfullscreen></iframe>
    </div>
</body>
 
</html>