How to make images responsive ?

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/[email protected]/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>

Output:

Resposive-iframe-in-Bootstrap — responsive iframe in Bootstrap Example Output

How to make images responsive ?

bishalpaul34

Improve

Article Tags :

Similar Reads

How to make Text Responsive in Bootstrap ?

Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap:

How to make Responsive Carousel in Bootstrap ?

Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr

How to make Form Responsive using Bootstrap ?

We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website.

Bootstrap 5 Images Responsive images

Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.Responsive

How to make images responsive ?

In today's world, mobile internet usage is growing at a fast pace, so it has become necessary for websites to have responsive designs for devices of different sizes. Websites that can change their appearance dynamically according to the device or the screen in which it is viewed are called responsiv

Responsive images in Bootstrap with Examples

Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on dif

How to Create a Responsive Image Gallery in Bootstrap ?

An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop s

How to Create Responsive Divs in Bootstrap ?

To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon

How to disable Responsive (mobile) Navbar in Bootstrap 5?

Bootstrap 5 Navbar Nav is used to make the navbar according to the requirement of the project like navbar navigation links built on .nav options with their own modifier class. Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button but in this article, we

Responsive utility classes in Bootstrap

The responsive utility classes help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content. Responsive utility classes are defined for five different type