Поместить блок в еще один блок у которого есть определенные размеры. И выровнять по центру родительский блок. Полностью резиновый блок будет занимать все доступное пространство, а так его ограничивает родительский блок. В родительском блоке по-моему можно размеры в процентах задавать или ограничивать максимальным значением типа max-width. Тогда он будет уменьшаться в след за вставляемым блоком, но доходя до определенного размера будет переставать расти.
CSS
.wrap {
margin: 0 auto;
max-width: 560px;
max-height: 320px;
}
.thumb-wrap {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumb-wrap iframe {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
Код на примере вставки видео с ютуб<div class="wrap">
<div class="thumb-wrap">
<iframe width="560"width="560" height="315" src="https://www.youtube.com/embed/C2i-9qTrPck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>