iFrame требует фиксированной высоты и ширины.Есть немного хитрости, чтобы получить его полу-отзывчивым.Сначала переместите закрывающий <div> для id="example1" на другую сторону iFrame.Затем присвойте классу iFrame класс или вставьте CSS в стиль in-line.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1{
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
}
.iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Верх с отступом по существу становится аспектным соотношением для вашего роста.Вы просто увеличиваете высоту с помощью отступов.Это обеспечивает постоянство соотношения сторон независимо от размера окна и позволяет избежать нарезки iframe с использованием ручных размеров в пикселях.