Резиновые размеры iframe

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. Помогите разобраться. Есть сайт. Занялся адаптацией сайта для мобильных и планшетов.
На сайте имеется контент, вставленный через iframe. Как можно адаптировать все имеющиеся ифрейми под разные устройства? Пробовал сделать так:

PHP/HTML
1
<div class="newsBlock"><?=$Rows['anounce']?></div><

Блок с новостью, в которой может быть и ифрейм

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.newsBlock {
   position: relative;
   width: 100%;
}
.newsBlock iframe,
.newsBlock video {
    height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

Тут думаю все понятно, но почему-то не работает. Или ифрейм не отображается или растягивает блок newsBlock.
Можно что-то сделать с этим?

Стал разбираться почему видео не выводит и понял что проблема кроется в том, что в newsBlock указана только ширина. А высота получается 0. Задал принудительно высоту блока и фрейм появился... Но мне конечно высота нужна тоже "резиновая", а не строго указанная.

CSS
1
height: 100%;

или

CSS
1
height: auto;

не дают результата

@Fedor92 · 25.01.2017, 11:13

Резиновая высота должна быть, как у фрейма так и у родительского блока(у обоих 100%)... И еще в код нужно добавить строчку:

CSS
1
html, body{width:100%; height:100%; margin:0}

@MirDj · 25.01.2017, 11:38 **[ТС]**

Fedor92, Насчет добавить строчку, то она в стилях сайта есть. А как же мне фрейму присвоить высоту 100% если он уже существует в базе? Допустим у меня 60 000 статей и везде указан размер для фрейма width и height. Что ж теперь все новости редактировать что ли?

@Fedor92 · 25.01.2017, 11:46

Сообщение от MirDj

Что ж теперь все новости редактировать что ли?

В идеале - да...

Можно топорно указать параметры с помощью !important

@MirDj · 25.01.2017, 12:12 **[ТС]**

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

HTML5
1
<div class="video-responsive"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  .video-responsive {
height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
 
.video-responsive iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

А вот с уже существующими проблема конечно.
А !important пробовал и что-то результата не дало, делал в обоих классах newsBlock и newsBlock iframe

Добавлено через 11 минут
я уж думаю может методом php, регуляркой проверять наличие фрейма и потом создавать новую конструкцию, где буду оборачивать фрейм в

HTML5
1
<div class="video-responsive"></div>

@Патрон · 25.01.2017, 23:29

задайте глобально всем фреймам в ксс, ширина и высота должна быть задана инлайново в айфрейме

CSS
1
2
3
4
iframe{
max-width: 100%;
max-height: 100%;
}

они будут скейлица(англ. scale - масштаб) при уменьшении ширины элемента в котором лежат, главное что бы этот элемент, тоже скейлился)

@MirDj · 26.01.2017, 11:22 **[ТС]**

Всем спасибо за ответы. Разобрался. Сделал так

PHP/HTML
1
<div class="newsBlock"><?=$Rows['anounce']?></div>

и стили

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.newsBlock iframe,
.newsBlock video {
    height: 100%;
   width: 100%;
}
 
 
.newsBlock {
   position: relative;
   height: 100%;
    overflow: hidden;
   width: 100%;
   }

@Hayntsev · 12.06.2022, 23:41

Дополню для тех, кто, возможно, как и я долго бился над корректным встраиванием фрейма в блок разметки на Bootstrap. Классические решения не подходили: либо всё работало криво, либо не работало совсем.

Обошёл проблему при помощи "костыля". Сначала загружал в блок <div> изображение-подложку, которая позволяла корректно отображать пропорции блока на экране и реализовать адаптивный "резиновый" дизайн. И уже поверх этой подложки отображал фрейм:

HTML5
1
2
<img class="img-fluid" src="/Photo/slider_background.jpg" alt="...">
<iframe src="/ImageSlider.php?id=111" seamless scrolling="no" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">

Работает отлично! Пользуйтесь... )))

@AlexZaw · 13.06.2022, 00:12

Сообщение от Hayntsev

Сначала загружал в блок <div> изображение-подложку

А так не проще?

HTML5
1
2
3
4
    <div class="box">
        <div class="box__ratio"></div>
        <iframe src="https://www.google.com/maps/embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
    position: relative;
    max-width: 800px;
  }
  
  .box__ratio{
    padding-top: 56.25%; /* пропорция 16:9 (расчет: 100/16*9) */
  }
  iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	25.01.2017, 11:38 [ТС]
	Fedor92, Насчет добавить строчку, то она в стилях сайта есть. А как же мне фрейму присвоить высоту 100% если он уже существует в базе? Допустим у меня 60 000 статей и везде указан размер для фрейма width и height. Что ж теперь все новости редактировать что ли? 0