Markdown Jekyll:插入填充容器的iframe

Question

如何在jekyll降价博客中包含视频向我解释了如何在帖子中插入iframe.但是,我正在使用iframe作为传单地图.与如何在jekyll的单个帖子中显示传单地图不同？我将地图代码存储在一个单独的位置html文件中,并在我的帖子中显示iframe中的地图.我在github上托管这个,所以我不能使用jekyll插件.

我可以显示地图,但我不明白如何确保iframe以响应浏览器窗口大小调整的方式填充博客容器.有没有办法只在博客文章的代码中指定这个,或者我必须创建自己的CSS样式,如这篇博文

Answer 1

我假设您正在{% include mapName.html %}为地图代码做准备，但是无论哪种方式，您的问题都更多地基于容器和CSS样式，您可能需要编写自己的样式以确保iframe能够响应，这是一个示例，摘自此处并进行了详细说明 （请参阅该站点以获取更多示例，由于它是非常详细的说明，因此您确实应该这样做）。如该帖子所述，这是该过程的简短示例：

1. div为ID为您的iframe 创建一个：

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

2. 在CSS中设置div的样式：

   .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%;
   }
   

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