jquery - 缩小窗口时如何将 iframe 内容大小调整到 bootstrap 4 中的 div 区域？

Question

我正在建立一个新网站，想要安装 iframe其中包含一个视频 div当窗口缩小时。我需要在 CSS 中的什么位置进行设置？

运行 Bootstrap 4.3.1 和 JQuery 3.4.1。 过去，我已经尝试设置 width和 height的 div's类为 100% 和 auto。但是视频还是很小。

index.html

<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-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>

样式.css

/* 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*/
}

我期望 index.html 的输出将显示视频/iframe内容适合其 div 区域。 iframe的内容现在显示的视频太小了，我认为这是因为 iframe不适合它的 div 区域。

这是窗口缩小时我现在输出的图像: <强> https://drive.google.com/file/d/14NmUs8d_9SzLKKsxiUUXFCwzCXmBTyIV/view?usp=sharing

Answer 1

我认为 iframe 的父 div 是 <div class="col-5 mx-auto">小 View 的宽度较小，因为您给它上了类 col-5 .所有设备尺寸都需要 5 列。如果您希望您的 iframe 对于小型设备更大，您可以将父 div 类从 col-5 更改为至 col-lg-5因此它仅在大型设备中需要 5 列，而在小型设备中需要 12 列(100% 宽度)。

<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>