Растяжение фреймов, чтобы они соответствовали ширине при сохранении соотношения сторон высоты и ширины (тема tumblr)

Question

У меня возникла проблема с создателем темы tumblr cutom. При добавлении, например, видеопоста, они помещают его в iframe с установленной шириной и высотой. Я могу сбросить ширину iframe, и видео будет растягиваться соответственно, но высота останется неизменной (как и ожидалось).

Но когда я устанавливаю высоту в auto, она сжимается в маленький прямоугольник, вместо того, чтобы предполагать его нормальное соотношение ширины и высоты (как я думал, это будет). Есть ли способ сделать iframe поддерживать соотношение, установленное для него в iframe, но масштабировать его вверх/вниз с помощью CSS? JQuery тоже в порядке, но предпочтительнее CSS.

HTML

<div class="video"> 
    {VideoEmbed} // tumblr replaces this with an iframe containing the video 
</div> 

CSS (не работает)

.video iframe { 
    height: auto // not working (as in, not producing desired effect) 
    width: 700px // working 
} 

Answer 1

Вы можете поддерживать соотношение, используя простой CSS обивка трюк. Вам нужно обернуть IFRAME в элементе контейнера, и набор стилей, как это:

/*span*/.iframe-wrapper { 
 
\t width: 50%; 
 
\t height: 0; 
 
\t padding: 40% 0 0; 
 
\t display: block; 
 
\t position: relative; 
 
\t border: 5px solid blue; 
 
} 
 

 
\t 
 
/*span*/.iframe-wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<span class='iframe-wrapper'> 
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen></iframe> 
 
</span>

В принципе, вы установите ширину вы хотите быть, затем добавить отступы к контейнер для поддержания пропорции.