Как сделать фрейм адаптивным?

Здравствуйте.

Участвую в партнёрских программах. Партнёрскую ссылку скрываю во фрейме.

Но, с мобильных устройств партнёрский сайт не открывается адаптивно, как без фрейма.

Существует ли возможность сделать фрейм адаптивным?

Использую такой фрейм:

Предположу, что проблема в высоте фрейма, он не растягивается на всю высоту? Попробуйте указать высоту не 100%, а 100vh

Или добавить для фрейма position:absolute;

height:100%

При этом нужно убедиться что родительский контейнер тоже занимает всю высоту (например на время закрасив его background:red;

Других причин на вскидку не могу вспомнить.

Есть только вариант что сайт донор как-то особым образом реагирует на то, когда его выводят в iframe. То есть они намеренно делают свой сайт неадаптивным для iframe. 

embedresponsively.com

Предположу, что проблема в высоте фрейма, он не растягивается на всю высоту? Попробуйте указать высоту не 100%, а 100vh

Или добавить для фрейма position:absolute;

height:100%

При этом нужно убедиться что родительский контейнер тоже занимает всю высоту (например на время закрасив его background:red;

 

Других причин на вскидку не могу вспомнить.

Есть только вариант что сайт донор как-то особым образом реагирует на то, когда его выводят в iframe. То есть они намеренно делают свой сайт неадаптивным для iframe. 

Спасибо.
Увы, 100vh не срабатывает. Страница превращается в маленький баннер.

Выставил высоту 700px, тогда на всю страницу отображается.
Притом, что, помогло сделать страницу адаптивной то, что сделал это через редактор лендингов Мобирайс. Вставил код фрейма в один из блоков.

Но, появилось два минуса:
1) другие блоки становятся некорректными, теряют дизайн, картинку
2) кнопки на донорском сайте не кликабельны. На первой странице кликабельны, на следующих нет. 

embedresponsively.com

Спасибо. 
Интересный сервис, но, сформированные в нём коды почему-то не срабатывают для необходимой адаптивности,
а также высота при любых настройках всё время размером с баннер-шапку сайта.

 Polzovinst, гляньте сюда

 Polzovinst, гляньте сюда

Олег Васильевич я, спасибо.
Вставлял предложенные коды.
Пока всё равно кнопки на донорском сайте на второй странице некликабельны.

Существует ли возможность сделать фрейм адаптивным?

Но, с мобильных устройств партнёрский сайт не открывается адаптивно, как без фрейма.

Пока всё равно кнопки на донорском сайте на второй странице некликабельны.

г-н Polzovinst, позвольте поинтересоваться, какую из нижеперечисленных проблем Вы решаете в теме с названием "Как сделать фрейм адаптивным?"?

1) Как сделать?

2) Существует ли возможность?

3) Как открыть партнёрский сайт с мобильных устройств адаптивно, («как с фреймом»)?

4) Как сделать какие-то "кнопки" на второй странице донорского сайта кликабельными?

5) Как вынести мозг собеседникам?

5

Существует ли возможность сделать фрейм адаптивным?

Но, с мобильных устройств партнёрский сайт не открывается адаптивно, как без фрейма.

Пока всё равно кнопки на донорском сайте на второй странице некликабельны.

г-н Polzovinst, позвольте поинтересоваться, какую из нижеперечисленных проблем Вы решаете в теме с названием "Как сделать фрейм адаптивным?"?

1) Как сделать?

2) Существует ли возможность?

3) Как открыть партнёрский сайт с мобильных устройств адаптивно, («как с фреймом»)?

4) Как сделать какие-то "кнопки" на второй странице донорского сайта кликабельными?

5) Как вынести мозг собеседникам?

Олег Васильевич я, пункты 1, 2, 3 пройдены. Теперь пункт 4.

Без фрейма на партнёрском сайте кнопки кликабельны, а из фрейма не кликаются.

Олег Васильевич я, пункты 1, 2, 3 пройдены. Теперь пункт 4.

Без фрейма на партнёрском сайте кнопки кликабельны, а из фрейма не кликаются.

Уже внятнее. Имхо, стоило было бы сообщить: «вопрос адаптивности фреймов исчерпан, решил так-то (+ указать код, описание решения). Тему можно было бы закрыть и поднять новую о кликабальности „кнопок“ на второй странице донорского сайта.

Олег Васильевич я, пункты 1, 2, 3 пройдены. Теперь пункт 4.

Без фрейма на партнёрском сайте кнопки кликабельны, а из фрейма не кликаются.

Уже внятнее. Имхо, стоило было бы сообщить: «вопрос адаптивности фреймов исчерпан, решил так-то (+ указать код, описание решения). Тему можно было бы закрыть и поднять новую о кликабальности „кнопок“ на второй странице донорского сайта.

Спойлер

… Человеческий совет: перед открытием новой темы, попытайтесь прояснить для себя чем, по отношению к вашему сайту, является сайт вашего парнёра (на котором кнопки не кликабельны): именно донором или таки на реципиентом

О донорстве услышал, и подхватил. Не знаю, может это неверное выражение.

О решении проблемы сказал  в 4-м посте instantcms.ru/forum/kak-sdelat-freim-adaptivnym.html#post-347682 :
С помощью конструктора и выставлении высоты 700px адаптивно отображается.

Без конструктора фрейм никак не делается адаптивным, ни с какими кодами.

Вот только кнопки почему некликабельны.

Вы хотите сказать, что вопрос адаптивности фреймов решается с помощью какого-то конструктора и  назначения им высоты 700рх? А можно посмотреть на страницу с таким адаптивным фреймом?

Без конструктора фрейм никак не делается адаптивным, ни с какими кодами.

Советую использовать другой конструктор, не Mobirise. Дополнительно- смотрите стили блока созданного в конструкторе и js файлы. Но не забывайте о стиле присвоенного блока в сетке шаблона, как раз речь об адаптивности, смотрите его параметры при разных разрешениях.

О донорстве услышал, и подхватил

Упомянул донорство в смысле: Донор — который предоставляет контент для вашей страницы (судя по коду так и есть). В то же время можно сказать что и реципиент — который получает трафик от вашей страницы.

Хотя эти слова наверное не используются в этом словаре терминов, но буквально они верно описывают суть происходящего)

По поводу самого вопроса. Штука в том, что в принципе пример из первого поста, как есть, вполне себе рабочий. Вот пример unila.ru/tests/test1.html содержимое плеера Youtube выводится на странице через iframe — занимает всю площадь страницы, все стили ваши, как в первом коде. Можно посмотреть исходный код. И мои предложения по поводу 100vh и absolute — лишние, если было нужно добиться именно этого.

Но если открыть эту страницу на смартфоне, видно что контент хоть и растянулся на всю страницу, но что-то как то не так)

Для исправления достаточно добавить в head строку

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и вот уже лучше unila.ru/tests/test2.html

Похоже, именно это и случилось когда использовали страницу созданную в mobirise — там тупо есть этот мета тег в хеадере, а в вашей первоначальной версии страницы его не было. В таком случае можно вернуться к начальному варианту и дополнить его мета тегом вьюпорт.

Без конструктора фрейм никак не делается адаптивным, ни с какими кодами.

Советую использовать другой конструктор, не Mobirise. Дополнительно- смотрите стили блока созданного в конструкторе и js файлы. Но не забывайте о стиле присвоенного блока в сетке шаблона, как раз речь об адаптивности, смотрите его параметры при разных разрешениях.

А какие конструкторы советуете?

О донорстве услышал, и подхватил

Упомянул донорство в смысле: Донор — который предоставляет контент для вашей страницы (судя по коду так и есть). В то же время можно сказать что и реципиент — который получает трафик от вашей страницы.

Хотя эти слова наверное не используются в этом словаре терминов, но буквально они верно описывают суть происходящего)

По поводу самого вопроса. Штука в том, что в принципе пример из первого поста, как есть, вполне себе рабочий. Вот пример unila.ru/tests/test1.html содержимое плеера Youtube выводится на странице через iframe — занимает всю площадь страницы, все стили ваши, как в первом коде. Можно посмотреть исходный код. И мои предложения по поводу 100vh и absolute — лишние, если было нужно добиться именно этого.

Но если открыть эту страницу на смартфоне, видно что контент хоть и растянулся на всю страницу, но что-то как то не так)

Для исправления достаточно добавить в head строку

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и вот уже лучше unila.ru/tests/test2.html

Похоже, именно это и случилось когда использовали страницу созданную в mobirise — там тупо есть этот мета тег в хеадере, а в вашей первоначальной версии страницы его не было. В таком случае можно вернуться к начальному варианту и дополнить его мета тегом вьюпорт.

Спасибо.

Насчёт «донор» мне приемлемо, ничего сказать этим не хотел. Я даже забыл, что здесь это прочитал, само подхватилось.

Два Ваших примера как-то одинаково на смартфоне отображаются.

Если выставление высоты 700px является корректным, раз это помогло,
то, больше, действительно, интересует, по какой причине через фрейм кнопки могут быть некликабельными.