Question

我试图在我的WordPress帖子中嵌入Instagram照片/视频帖子。嵌入工作的桌面版本很好，但在移动设备中，它扩展了容器，使一切看起来更小。

为了防止这种情况，我使用了embedresponsively.com中的嵌入iframe代码，但它在帖子的底部留下了一些空格。

如何为所有设备尺寸正确嵌入Instagram帖子？

Answer 1

我认为现在Instagram帖子可以自动嵌入到Wordpress帖子中，而不会在每台设备上产生任何显示问题。您是否也检查了此https://www.instagram.com/developer/embedding/

此外，当您尝试通过Embedresponsively在WP帖子/页面上嵌入Instagram帖子时，您可以编辑样式并减少填充底部。

.embed-container {
  position: relative; 
  padding-bottom: 120%; 
  height: 0; 
  overflow: hidden;} 

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; }

<div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

Embedresponsively默认提供的代码：

<style>.embed-container {position: relative; padding-bottom: 120%; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 95%; }</style><div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

Answer 2

也许这个 solution 对您有用：

iframe.instagram-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
}

如何在不调整容器大小的情况下嵌入Instagram帖子

2 个答案: