неразборчивое встраивание iframe - не будет хорошо играть

Question

Я пробовал каждую комбинацию свойств и атрибутов, которую смог придумать, чтобы встроить этот iframe в пост WordPress, чтобы он был виден как на мобильных, так и на больших экранах.Кажется, мне нужно указать высоту, чтобы отобразить весь кадр, но после этого останавливается отображение всей ширины на мобильном телефоне.

Любая помощь очень ценится.

<div markdown="0" id="island">
  <iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>

Answer 1

Вам нужно создать свой iframe внутри другого элемента (с его позицией relative) и поместить свой iframe с позицией absolute:

Верх: 56,25% полезен для сохранения соотношения (16: 9) фрейма.

Работает JSfiddle (попробуйте изменить размер вкладки дисплея:)).

Html:

<section>
    <article id="iframe">
        <iframe src="src.html"></iframe>
    </article>
</section>

Css:

section{
    max-width: 800px;
}

#iframe{
    width: 100%;
    max-width: 800px;
    position: relative;
    padding-top: 56.25%;
}

iframe{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: auto;
    display: block;
    position: absolute;
}

Источник: smashingmagazine.com

edit: вот видео изменяемого размера iframe:)

edit2: oopps, забыл тег section