Set Size to Responsive Iframe in Bootstrap

Bootstrap 5 iframe unresponsive height

From the bootstrap documentation: (https://getbootstrap.com/docs/5.2/helpers/ratio/#example)

Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.

I also removed the unneeded (hardcoded) width/height attributes.

See sample code below:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12">
      <div class="card mt-4">
        <!-- changes made from here -->
        <div class="ratio ratio-16x9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
        </div>
        <!-- to here -->

        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-dark">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

How to fit iframe content size to its div area in bootstrap 4 when the window is shrunk?

I think the parent div of the iframe that is <div class="col-5 mx-auto"> has less width for small views as you have given it class col-5. It will take 5 columns for all device sizes. If you want your iframe to be bigger for small devices you can change the parent div class from col-5 to col-lg-5 so that it takes 5 columns only in large devices and 12 columns (100% width) for small devices.

<div class="col-5 mx-auto"> // before, change this as below

<div class="col-lg-5 mx-auto"> // After

/* Under line of section title */.heading-underline{   width: 3rem;   height: .2rem;   background-color: #1EBBAE;   margin:0 auto 2rem; /*format: top left&right bottom*/}/* End under line of section title */h3.heading{   font-size: 1.9rem;   font-weight: 700;   text-transform: uppercase;   margin-bottom: 1.9rem;}/*--- Bootstrap Mobile Gutter Fix --*/.row, .container-fluid {   margin-left: 0px!important;   margin-right: 0px!important;}
/*--- iOS Fixed Background Image --*/.fixed-background {   position: relative;   width: 100%;}.fixed-wrap {   clip: rect(0, auto, auto, 0);   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   z-index: -999!important;}.fixed {   position: fixed;   display: block;   top: 0;   left: 0;   width: 100%;   height: 100%;   background-size: cover;   background-position: center center;  -webkit-transform: translateZ(0);  transform: translateZ(0);  will-change: transform;}

/*--------------------- Resources Section---------------------------*/.fixed{   background-image: url(../images/2018-Jeep-Wrangler-front-02.jpg);   z-index: -1;/*makes background running in backside, while "1" makes it will be shown in front side*/ }  .dark{   background-color: rgba(0, 0, 0, 0.75);   color: white;   padding: 7rem 2rem;/*format: top&bottom left&right.*/}.fixed-background h3{   margin-bottom: 2rem;/*2rem*/}.fixed-background p{   margin-top: 1.5rem;}.resource svg.svg-inline--fa{ /* svg.inline--fa is found from google chrome inspector*/   color : #1EBBAE;}.resource h3{   font-size: 1.3rem;   text-transform: uppercase;   padding-bottom: .4rem;}.resource p{   font-size: 1.1rem;   text-align: justify;   text-justify:auto;   word-wrap: break-word;   width: 400px;}.resource img{   width: 60%;   height: 55%;   opacity: 0.3;   filter: alpha(opacity=30); /* For IE8 and earlier */}.resource img:hover{   opacity: 1;   filter: alpha(opacity=100); /* For IE8 and earlier */}
/*white border*/.boxshadow{   position: relative;  -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);  padding: 10px;  background: white;}.boxshadow:hover{   position: relative;   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);   box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);   padding: 10px;   background: #1EBBAE;}/*end white border*/
/* Make the image fit the box */.boxshadow img {   width: 100%;   border: 1px solid #8a4419;   border-style: inset;}/* end make the image fit the box*/
.boxshadow::after {   content: '';   position: absolute;   z-index: -1; /* hide shadow behind image */   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);           width: 70%;    left: 15%; /* one half of the remaining 30% */   height: 100px;   bottom: 0;}
#resources h3{   text-transform: uppercase;}#resources .btn-secondary{   border-width: medium;   border-radius: 0;   padding: .2rem .5rem;/*.6rem 1.2rem*/   font-size: 1rem;/*1.2rem*/   text-transform: unset;   margin: 1rem;   border-color: #1EBBAE;   background-color: #1EBBAE;   color: white;}
@media(max-width: 767px){   /*iframe of video where the problem at*/   .col-5 .resource iframe{      width: 100%;      height:auto;   }   /*end iframe where the problem at*/}

<link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"      crossorigin="anonymous"    />    <div id="resources" class="offset">
<div class="fixed-background">
   <div class="row dark text-center">
      <div class="col-12">         <h3 class="heading">Sewa dari Tiga Kota Besar di Sumatera</h3>            <div class="heading-underline"></div>      </div>
      <div class="col-md-4">          <h3>Medan</h3>            <div class="resource">               <img class="boxshadow" src="images/icon-medan.jpg">            </div>            <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>       </div>
       <div class="col-md-4">           <h3>Palembang</h3>           <div class="resource">              <img class="boxshadow" src="images/icon-palembang.jpg">           </div>           <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>       </div>
       <div class="col-md-4">          <h3>Padang</h3>             <div class="resource">                <img class="boxshadow" src="images/icon-padang.jpg">             </div>             <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>       </div>   
       <div class="col-lg-5 mx-auto">          <div class="resource">             <div class="heading-underline"></div>                <!-- 16:9 aspect ratio, THIS IS THE SUITE ONE-->                <div class="embed-responsive embed-responsive-16by9">                   <!-- "..?playlist=(embedded-link)&loop=1" is for repeated the same videos that played -->                   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Y-1H27WxaJo?playlist=Y-1H27WxaJo&loop=1" allowfullscreen autoplay></iframe>                </div>          </div>       </div>
   </div><!-- End Row Dark -->   <div class="fixed-wrap">      <div class="fixed"><!-- class fixed is where we add the background image -->
      </div>    </div>
</div><!-- End Fixed Background -->
</div>

Related Topics