Растягивание фреймов в соответствии с шириной при сохранении соотношения высоты и ширины (тема Tumblr)

Question

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

Но когда я устанавливаю высоту на авто, она сжимается в маленький прямоугольник вместо того, чтобы предполагать его нормальное соотношение ширины и высоты (как я и думал). Есть ли способ заставить 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 {
 width: 50%;
 height: 0;
 padding: 40% 0 0;
 display: block;
 position: relative;
 border: 5px solid blue;
}

 
/*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>

По сути, вы устанавливаете желаемую ширину <iframe> быть, затем добавьте отступ к контейнеру, чтобы сохранить соотношение сторон.