Markdown Jekyll：插入一个填充容器的 iframe

Question

how to include video in jekyll markdown blog explained me how to insert an iframe into a post. However, I'm using the iframe for a leaflet map. Unlike How to display a leaflet map in a single post in jekyll? 我将地图代码存储在单独的位置 html 文件中，并在我的 post 的 iframe 中显示地图。我在 github 上托管它，所以我不能使用 jekyll 插件。

我可以显示地图，但我不明白如何确保 iframe 以响应浏览器 window 调整大小的方式填充博客容器。有没有办法只在博客 post 的代码中指定它，或者我必须创建自己的 css 风格，像这样 blogpost

Answer 1

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

中提到的那样

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

<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.

响应图像

Answer 2

CSS 助手

.is-fullwidth {
    width: 100%;
}

降价中

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

Markdown Jekyll：插入一个填充容器的 iframe

Markdown Jekyll: Insert an iframe that fills the container

iframe

jekyll

leaflet