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

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

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


jekyll iframe leaflet
person raphael    schedule 27.07.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

  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, который я использую в своем собственном блоге при встраивании видео и фреймов, поскольку он делает адаптивные изображения с использованием Javascript.

person matrixanomaly    schedule 28.07.2015
comment
После некоторых усилий я заставил это работать. Я отказался от решения, предложенного в сообщении блога, на которое я ссылался в своем вопросе, потому что использование <div> в моих сообщениях уценки нарушило другое форматирование уценки за пределами <div>. Оказывается (я думаю), это произошло из-за того, что моя тема использовала redcarpet в качестве синтаксического анализатора. Переключение на kramdown сработало. Вопрос Я не совсем понимаю ваше первое предложение. В настоящее время я использую плагин в QGIS для создания отдельной карты листовок в своей собственной папке и со своей собственной index.html Затем я использую iframe для встраивания карты в сообщение. - person raphael; 29.07.2015
comment
@raphael ах, я вижу. Под первым предложением я подразумевал, что вы можете «вставлять» фрагменты всего, что хотите, используя синтаксис `{% include filename.html %}, который, как я думал, вы могли бы сделать. Например, он используется для включения строки заголовка, вот документ для него: jekyllrb.com/docs/templates /#включает - person matrixanomaly; 30.07.2015

arrow_upward
0
arrow_downward

Помощник CSS

.is-fullwidth {
    width: 100%;
}

В уценке

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" class="is-fullwidth" height="315px"
    </iframe>
person Arash Outadi    schedule 12.12.2019