Markdown Jekyll: вставьте iframe, который заполняет контейнер

Как включить видео в блог Jekyll markdown объяснил мне, как вставить iframe в пост. Однако я использую iframe для карты листовок. В отличие от как отобразить карту листовки в одном сообщении в jekyll? Я храню код карты в отдельном html-файле местоположения и отображаю карту в iframe в моем сообщении. Я размещаю это на github, поэтому я не могу использовать плагины jekyll.

Я могу получить карту для отображения, но я не понимаю, как чтобы убедиться, что iframe заполняет контейнер блога таким образом, который реагирует на изменение размера окна браузера. Есть ли способ указать это только в коде для сообщения в блоге, или мне нужно создать свой собственный стиль css, как это blogpost

7
iframe jekyll leaflet

1 ответов

Я предполагаю, что вы делаете {% include mapName.html %} для ваших кодов карт, но в любом случае ваш вопрос больше основан на контейнерах и стиле CSS, вам, вероятно, нужно будет либо написать свой собственный стиль, чтобы убедиться, что iframes отзывчивы, вот пример, который взят из и объяснен подробно здесь (пожалуйста, также обратитесь к этому сайту для получения дополнительных примеров, вы действительно должны, так как это очень подробное объяснение). вот краткий пример процесса, как упомянуто в этот пост:

  1. создать div для вашего iframe с идентификатором.:

    <div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

  2. стиль div в CSS:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

  3. и, наконец, стиль iframe:

    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

это, как говорится, если ваш код карты не совсем уникален, вы можете просто пойти по более простому маршруту и не иметь дело с любым стилем CSS с сервисом, таким как embed.ly, который я использую на моем собственном блоге когда встраивание видео и iframes, так как он делает отзывчивые изображения с помощью Javascript.

4