コンテナのサイズを変更せずにInstagram postを埋め込む方法

Question

私はWordPressの投稿にInstagramの写真/ビデオ投稿を埋め込むようにしています。埋め込みは、デスクトップ版ではうまく動作しますが、モバイルでは、すべてを小さく見えるようにコンテナを拡張します。これを防止するために

See: Screenshot of mobile version

私はembedresponsively.comから埋め込みのiframeコードを使用するが、それはポストの下部にいくつかの空白を残します。私は正しく、すべてのデバイス・サイズのためのInstagramのポストを埋め込む方法に

See image

？

Answer 1

Instagramの投稿は、すべてのデバイスで表示の問題を発生させずに自動的にWordpressの投稿に埋め込むことができると思います。あなたがスタイルを編集し、パディング下を減らすことができますEmbedresponsivelyによってWPポスト/ページにInstagramのポストを埋め込むしようとしたときにもまた、このhttps://www.instagram.com/developer/embedding/

を確認しました。

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