Как вставить сообщение Instagram без изменения размера контейнера

Я пытаюсь вставить пост/видео пост Instagram в мой пост WordPress. Встраивание прекрасно работает на настольной версии, но на мобильных устройствах он расширяет контейнер, что делает все меньше.Как вставить сообщение Instagram без изменения размера контейнера

See: Screenshot of mobile version

Для предотвращения этого я использовал код для вставки Iframe из embedresponsively.com, но оставляет некоторые пробелы в нижней части поста.

See image

Как я правильно вставлять Instagram почту для всех размеров устройств?

источник

2016-12-10 Vipin Yadav

Я думаю, что теперь сообщения Instagram могут автоматически вставляться в сообщение Wordpress, не создавая проблем с отображением на каждом устройстве. Вы проверили также этот https://www.instagram.com/developer/embedding/

Кроме того, при попытке встроить Instagram сообщения на WP записи/странице с помощью Embedresponsively вы можете редактировать стили и уменьшить обивки-нижний.

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

источник

2016-12-11 11:14:07 Filippos

Проблема заключается в том, когда я вставлять Instagram почту непосредственно с помощью встраивания, он загружает с максимальной шириной и после полной загрузки, он помещается внутри контейнера. Но через несколько дней я монетизировал свой сайт с помощью объявлений Google. Когда страница загружается, сообщение Instagram имеет максимальную ширину, и в то же время объявления Google загружаются также с доступным пространством. Таким образом, он остается сломанным даже после полной загрузки, поскольку при загрузке объявления не изменяются. –

Есть ли какая-нибудь фотография, которую вы можете мне показать? Вы пробовали, как я сказал вам с Embedresponsively? – Filippos

Я изменил реализацию контейнера от flexbox до плавающих div. Он работает нормально. Я думаю, что flexbox еще не поддерживается во многих браузерах. Поэтому я не буду использовать его в течение некоторого времени. –

Как вставить сообщение Instagram без изменения размера контейнера

ответ

Смежные вопросы