Ответственный iframe, который заполняет div

Так что, как говорится в названии, я пытаюсь получить iframe, который реагирует и заполняет пространство, возможно ли это? Я немного схожу с этим, я опубликую то, что у меня есть, это кажется получувствительным. Ширина и высота в IFrame HTML тега не делают очевидной разницу:Ответственный iframe, который заполняет div

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

источник

2016-09-11 Sergi

Просто установить width и height от фрейма к 100%, чтобы соответствовать размерам контейнера. Лучше использовать CSS, а не использовать атрибуты HTML для width и height.

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

источник

2016-09-11 10:06:12 andreas

По некоторым причинам я не могу добавить что-нибудь ниже сейчас, это просто не видно. – Sergi

обновил ответ с некоторым содержанием ниже - для меня это видно ... – andreas

Ответственный iframe, который заполняет div

ответ

Смежные вопросы