Markdown Jekyll：插入填充容器的 iframe答案

【问题标题】：Markdown Jekyll: Insert an iframe that fills the containerMarkdown Jekyll：插入填充容器的 iframe
【发布时间】：2015-10-18 01:30:00
【问题描述】：

how to include video in jekyll markdown blog 向我解释了如何在帖子中插入 iframe。但是，我将 iframe 用于传单地图。与How to display a leaflet map in a single post in jekyll? 不同，我将地图代码存储在单独的位置 html 文件中，并在我的帖子中的 iframe 中显示地图。我在 github 上托管这个，所以我不能使用 jekyll 插件。

我可以显示地图，但我不明白如何确保 iframe 以响应浏览器窗口大小调整的方式填充博客容器。有没有办法只在博客文章的代码中指定这一点，还是我必须创建自己的 css 样式，如blogpost

【问题讨论】：

标签： iframe leaflet jekyll

【解决方案1】：

我假设您正在为您的地图代码执行{% include mapName.html %}，但无论哪种方式，您的问题都更多地基于容器和 CSS 样式，您可能需要编写自己的样式以确保 iframe 具有响应性，这里是一个例子，取自here并详细解释（也请参阅该站点以获取更多示例，您确实应该这样做，因为它是一个非常详细的解释）。 下面是一个简短的示例，如该帖子中所述：

为您的 iframe 创建一个 div 并使用 id。：

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

在 CSS 中设置 div 样式：

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

最后为iframe设置样式：

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

话虽如此，如果您的地图代码不是完全唯一的，您可以走更简单的路线，而不使用像 embed.ly 这样的服务处理任何 CSS 样式，我在自己的博客中嵌入视频和 iframe 时使用它，因为它使用 Javascript 处理响应式图像。

【讨论】：

经过一番努力，我得到了这个工作。我放弃了在我的问题中链接到的博客文章中建议的解决方案，因为在我的降价帖子中使用<div> 破坏了<div> 之外的其他降价格式。原来（我认为）这是由于我的主题使用redcarpet 作为解析器。切换到kramdown 工作。问题我不太理解你的第一句话。我目前正在使用 QGIS 中的一个插件来生成一个独立的传单映射它自己的文件夹和它自己的 index.html 然后我使用 iframe 将地图嵌入到帖子中。
@raphael 啊，我明白了。嗯，我的第一句话的意思是，你可以使用 `{% include filename.html %} 语法“插入”任何你想要的 sn-ps，我认为这可能是你可能正在做的事情。例如，它用于包含标题栏，这是它的文档：jekyllrb.com/docs/templates/#includes

【解决方案2】：

CSS 助手

.is-fullwidth {
    width: 100%;
}

在降价中

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

【讨论】：