Responsive iframe, das ein div füllt

So wie der Titel sagt, ich versuche, einen Iframe zu haben, der reaktionsfähig ist und einen Raum ausfüllt, ist das überhaupt möglich? Ich werde ein bisschen verrückt damit, ich werde posten, was ich habe, dass es nur halb reagierend scheint. Die Breite und die Höhe in dem iframe HTML-Tag machen keinen offensichtlichen Unterschied:Responsive iframe, das ein div füllt

.nav { 
 
    width: 80%; 
 
    border: 5px solid; 
 
    margin-top: 35%; 
 
    margin-left: 10%; 
 
    padding-left: 2%; 
 
} 
 
.links { 
 
    padding-left: 15%; 
 
    padding-top: 5%; 
 
} 
 
.col-md-8 { 
 
    border: 5px solid; 
 
} 
 
.col-md-4 { 
 
    border: 5px solid; 
 
} 
 
.video-container iframe { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 35px; 
 
    height: 0; 
 
    overflow: hidden; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<html> 
 

 
<body> 
 
    <div class="container"> 
 

 
    <div class="row one"> 
 
     <div class="col-md-4"> 
 
     <div class="nav"> 
 
      <h1> Test nav </h1> 
 
      <div class="links"> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      </div> 
 
      <!-- links --> 
 
     </div> 
 
     <!-- nav --> 
 
     </div> 
 

 
     <div class="col-md-8"> 
 
     <div class="video-container"> 
 
      <iframe width="100" height="100" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- row --> 
 

 

 
    </div> 
 
    <!-- container --> 
 
</body> 
 

 
</html>

Quelle

2016-09-11 Sergi

Einfach die width und height des iframe 100% die Abmessungen des Behälters entspricht. Es ist besser, CSS anstelle der HTML-Attribute für width und height zu verwenden.

.nav { 
 
    width: 80%; 
 
    border: 5px solid; 
 
    margin-top: 35%; 
 
    margin-left: 10%; 
 
    padding-left: 2%; 
 
} 
 
.links { 
 
    padding-left: 15%; 
 
    padding-top: 5%; 
 
} 
 
.col-md-8 { 
 
    border: 5px solid; 
 
} 
 
.col-md-4 { 
 
    border: 5px solid; 
 
} 
 
.video-container iframe { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.video-container { 
 
    height: 100%; 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
}

<div class="container"> 
 

 
    <div class="row one"> 
 
    <div class="col-md-4"> 
 
     <div class="nav"> 
 
     <h1> Test nav </h1> 
 
     <div class="links"> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
      <p><a href=""> Test </a> 
 
      </p> 
 
     </div> 
 
     <!-- links --> 
 
     </div> 
 
     <!-- nav --> 
 
    </div> 
 

 
    <div class="col-md-8"> 
 
     <div class="video-container"> 
 
     <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE"></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- row --> 
 

 
    <div> 
 
    <div class="col-md-12"> 
 
     test 
 
     
 
    </div> 
 
    </div> 
 
    <!-- row --> 
 

 

 
</div> 
 
<!-- container -->

Quelle

2016-09-11 10:06:12 andreas

Aus irgendeinem Grund kann ich nichts weiter unten jetzt hinzufügen, es ist einfach nicht sichtbar. – Sergi

aktualisiert die Antwort mit etwas Inhalt unten - für mich ist es sichtbar ... – andreas

Responsive iframe, das ein div füllt

Antwort

Verwandte Themen