Fitting Iframe Inside a Div

How fill iframe inside div?

apply height : 100% to all parent items (all the way up to html & body if needed).

since it is hard to see the way the iframe looks, i just gave it a red background.

The alternative would be to use Flexbox, which isn't supported properly on all browsers yet.

html, body { height: 100%; }
textarea {    max-width: 800px;    max-height: 250px;}.contact {    width: 100%;    min-height: 543px;    display: table;    height:100%;}

#contact-map {    height: 100%;    display: table-cell;}
#contact-form {    background-color: blue;    display: table-cell;    width: 43%;    height:100%;}
iframe{   background-color:red;   height:100%;}

<div class="contact">    <div id="contact-form">        <p id="contact-street">text-text</p>      <p id="contact-emailto">text-text</p>      <p id="contact-telephone">123123</p>      <textarea name="contact_message" id="contact_message"></textarea>    </div>    <div id="contact-map">        <iframe style="background-color:red" frameborder="0" allowfullscreen=""></iframe>    </div></div>

Make Iframe to fit 100% of container's remaining height

Update in 2019

TL;DR: Today the best option is - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. Here is a code sample for flexbox:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

Make embedded iframe scale to fit enclosing div

The embed link you provided determines the width, but that can be overridden by CSS, so you can take it or leave it.

You can either set your iframe to the specific dimensions, <iframe width="300" height="300" src="//vine.co/v/iMJzrThFhDL/embed/simple"></iframe> or use CSS to give it width AND height of 100%, and make certain that the container dimensions are directly proportional. Since Vines are square, you want both to be identical.

jsFiddle in action

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>

Fit content (images, documents, videos) inside iFrame

Add this to your section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />