Как добавить max-width в отзывчивый iframe? - PullRequest
Новая
       12

Как добавить max-width в отзывчивый iframe?

0 голосов
/ 06 июня 2018

Я поковырялся эта маленькая скрипка здесь и я доволен визуальным результатом.Цель состояла в том, чтобы сделать центрированный отзывчивый видеоролик iframe.

Но я не смог найти хороший способ добавить максимальную ширину 1920 пикселей.Если у вас есть видео в формате Full HD, было бы неплохо не допустить его увеличения.

И если мой CSS можно улучшить, не стесняйтесь. 

<div class="container">
    <div class="embed-responsive">
         <iframe width="640" height="360" src="https://player.vimeo.com/video/176131682?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>


html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;

}
.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    margin: auto;
}

Ответы [ 2 ]

0 голосов
/ 21 августа 2018

Мое решение - добавить обертку вокруг обертки iframe / parent.Таким образом, вы не нарушаете структуру iframe, поэтому оболочка iframe адаптируется к своему родителю.Я хотел бы, чтобы это было достаточно ясно:) 

.wrapper{
  width: 100%;
  max-width: 1200px; //set your `max-width` here
  max-height: auto; //necessary to keep proportion
  margin: 0 auto; //centering 

}
.videoWrapper{
  width:100%;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}

iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="wrapper">
        <div class="videoWrapper">
          <iframe src=""></iframe>
        </div>
</div>
0 голосов
/ 06 июня 2018

Вы можете в основном сохранить свойства вашего iframe и добавить максимальную ширину в свой контейнер.Вам нужно будет изменить его положение на относительное и сделать его элементом уровня блока, чтобы вы могли обеспечить его центрирование.См. Ниже: 

.embed-responsive {
    position: relative;
    display:block;
    margin:0 auto;
    width: 100%;
    max-width:1920px;
    padding-bottom: 56.25%;
    top: 50%;
    transform:translateY(-50%)
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
}

FIDDLE: https://jsfiddle.net/2nu817d9/21/

...