Редактирование двух разных минимальных высот iframe на одной странице с использованием css + html - PullRequest
Новая
       7

Редактирование двух разных минимальных высот iframe на одной странице с использованием css + html

0 голосов
/ 22 февраля 2019

Мне нужна помощь, в настоящее время я застрял в том, как установить разные минимальные высоты для двух разных видео iframe с Youtube, которые находятся на одной странице.

В настоящее время, как кажется, работает (но только для одного илиother) изменяет минимальную высоту в «.cms-page iframe» и устанавливает ее в значение! Important.

Вот как в данный момент выглядит CSS: 

.cms-page iframe {
   min-height: 564px !important;
}

Вышедля большого iframe я также хочу иметь минимальную высоту 250px для меньшего iframe.

С уважением, Гарри

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

В вашем css измените .cms-page iframe на .vcontainer iframe.

0 голосов
/ 22 февраля 2019

Вы действительно не должны обходить ширину / высоту iframe с этим кодом.Просто установите ширину для внешнего div. 

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div style="width:33%">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iOHkyZ62jjQ" frameborder="0" allowfullscreen="" id="widget2"></iframe>
        </div>
      </div>
    </div>
    <div class="row">
      <div style="width:100%">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iOHkyZ62jjQ" frameborder="0" allowfullscreen="" id="widget2"></iframe>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
0 голосов
/ 22 февраля 2019

Дайте разные id каждому iframe и используйте его для определения минимальной высоты.Первому я дал идентификатор iframe1, а второй iframe2.взгляните 

#iframe1{
  min-height:250px !important;
}

#iframe2{
  min-height:564px !important;
}

Работает отлично:) 

.container-full {
width:100%;
margin:0;
}
.cms-page {
margin: 0;
}
.breadcrumb {
display: none;
}
.row .row {
width: 100%;
margin: 0 0px;
}
.col {
padding: 0px;
}
.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
  
  .container--pad {
   padding-left: 0rem;
   padding-right: 0rem;
  }
}
.button2 {
  width: 180px;
  height: 50px;
  border: 3px solid #FFFFFF;
  text-decoration: none;
  color: #ec1c24;
  text-align: center;
  display: block;
  font-weight: 600;
  background-color: #FFFFFF;
  text-transform: uppercase;
   margin-left: auto;
   margin-right: auto;
}
.button2:hover {
  color: #fff;
  background-color: #111111;
  border: 3px solid #111111;
}
.FullWidthImg {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}
.img-wrapper {
  position: relative;
}

.img-wrapper img {
  width: 100%;
}
.hcontainer {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.pcontainer {
  padding-bottom: 20px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.vcontainer {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.ccontainer {
padding-top: 80px;
padding-bottom: 80px;
  width: 100%;
  background-color: #efefef;
}
.img-wrapper .overlay {
  position: absolute;
  top: 64%; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.img-wrapper h2 {
  margin: 0 0 .5em;
}
.column {
  float: left;
  width: 50%;
 padding: 10px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}


#iframe1{
  min-height:250px !important;
}

#iframe2{
  min-height:564px !important;
}
<div class="vcontainer">
<p><iframe src="https://www.youtube.com/embed/l01s5oDySjM" frameborder="0" width="100%" id="iframe1" allowfullscreen=""></iframe></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div class="ccontainer">
<div class="hcontainer"><img src="https://gallery.mailchimp.com/c4e779335ad94d19c242bf724/images/75b2051f-dc4d-4ca1-96f1-273d67b214fa.png" alt="" /></div>
<div class="pcontainer">
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="column">
<p style="text-align: center;"><span style="font-size: 18px; color: #777777;">We all know that after a long day, it&rsquo;s tough to have energy for a good workout. With the help of 1UP Pre-Workout, you won&rsquo;t feel hesitant to go train and put in the hard work.</span></p>
</div>
<div class="column">
<p id="small"><iframe id="iframe2" src="https://www.youtube.com/embed/pKJgRkV2vI8" frameborder="0" width="560" height="315" allowfullscreen=""></iframe></p>
</div>
</div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...