How to make iframe Responsive in Bootstrap ?

Last Updated : 01 May, 2024

A responsive iframe in Bootstrap refers to embedding an iframe within a container that adjusts its size and aspect ratio based on the screen size, ensuring proper display and usability across various devices and viewports.

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>