1

сделал блок с классом

`<div id="video">
<div class="Vid">
    <iframe width="560" height="349" src="http://www.youtube.com/" frameborder="1px" allowfullscreen></iframe>
</div>
</div>
'

в css

div.vid{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;

}

div.vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

В итоге на странице отображается только frameborder="1px" а содержимое внутри не показывает. В чем может быть проблема что я делаю не так?=)

1 ответ 1

1

Я для этого использую такую конструкцию:

.div1 {
  padding-top: 5px; 
  overflow: hidden; 
  position: relative; 
  max-width: 640px;
}

.div2 {
  overflow: hidden; 
  position: relative; 
  height: 0px; 
  padding-bottom: 56.25%;
}

.iframe {
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%;
}
<div class="div1">
  <div class="div2">
    <iframe class="iframe" frameborder="0" src="https://www.youtube.com/embed/fpTUIoxNpYw?wmode=transparent&amp;controls=2" allowfullscreen="true" scrolling="no"></iframe>
  </div>
</div>

3
  • Тут jsfiddle.net/m0wg57q3 можно ширину изменить и посмотреть на изменение видео.
    – Visman
    18 фев 2016 в 7:21
  • Спасибо!=) получилось наконец=)
    – Саня
    18 фев 2016 в 7:44
  • А если на сайте картинка как фон, поверх картинки надпись по центру, размещаю видео поверх картинки, но надпись в одном браузере улетает далеко вправо, а в другом-мелькает и как будто скрыта под видео. Что может быть?
    – Albra
    8 фев 2021 в 21:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.