Адаптивный iframe: Адаптивный / резиновый iframe, как это сделать? — Хабр Q&A

html — Адаптивное видео с Vimeo

Задать вопрос

Вопрос задан 5 лет 3 месяца назад

Изменён 5 лет 3 месяца назад

Просмотрен 713 раз

Доброго времени. Хочу вставить на сайте видео с Vimeo и сделать его адаптивным. iframe помещаю в блок с классом video:

.video {
  width: 556px;
  position: relative;
  padding-bottom: 56.25%;
  /*пропорции видео 16:9 */
  padding-top: 25px;
  height: 0;
  background: red;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div>
  <iframe src="https://player.vimeo.  com/video/254988878" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
         </iframe>
</div>

Но iframe по высоте почему-то получается намного больше, чем само видео, и кнопка загрузки видео вверху находится.

В чем может быть проблема, как это исправить?

Когда с youtube вставлял видео таким способом, то все было нормально, там правда не iframe

• html
• css
• html5
• видео

Нарисовал padding— ов и спрашиваешь почему не так как хочу. Как сверстал так и выглядит….

.video {
  width: 640px;
  position: relative;
  height: 360px;
  background: red;
  padding: 5px;
}

.video iframe {
  position: absolute;
}

<div>
  <iframe src="https://player.vimeo.com/video/254988878" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
         </iframe>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Сайт на WIX — сделать iframe адаптивным • freelance job for a specialist • category Web programming ≡ Client Ivan K

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

3 of 3

project expired

1. publication

2. open for proposals

3. project expired

Есть сайт на базе WIX

На сайте есть функциональность покупки, которая реализована путем вставки через iframe.

Проблема текущего iframe на WIX, что он не адаптивный по высоте и ширине.

Ищем разработчика, который сможет на базе сайта WIX сделать эти виджеты встроенные в сайт через 

iframe адаптивными по высоте и ширине или эти же виджеты встроить в сайт не через iframe, а в код самого сайта на WIX. 

Пример страницы сайта с виджетом покупки на странице http://oberig-sg.com/travel, а вот пример как этот же виджет может выглядеть не в iframe т.е. он полностью адаптивен https://shop.oberig-sg.com/travel-widget.html.

Просьба писать тем, кто хорошо знает, что такое WIX и все его ограничения.

• Proposals 6
• Declined 1

date online rating cost time to complete

1. 1 day700 UAH

   1 day700 UAH

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

2. proposal concealed by freelancer

3.  freelancer isn’t working in the service any longer

4.  freelancer isn’t working in the service any longer

5. 3 days5000 UAH

   3 days5000 UAH

   Здравствуйте, имею опыт подобных манипуляций, нужны доступы к сайту WIX будут.

   
   

6. 2 days8000 UAH

   2 days8000 UAH

   Иван , добрый день!

   Готовы взяться за ваш проект. Команда состоит из 8 человек и мы успешно работаем с CMS Битрикс24, Joomla, Opencart, WordPress и тд.

   Последние магазины:
   grillcenter.com.ua
   estaciondete.es
   www.zalizkoshop.com.ua
   shop.lbdessous.ua
   …
   Есть опыт в оптимизации движков для работы с большим количеством товаров (кейс связан с синхронизацией сайт и площадки copart / aiia).
   Есть опыт в настройки синхронизации с 1с и транспортных компаний.
   Достаточное количество модулей, которые написали сами или оптимизировали работу под рынок СНГ.

   Работу разбиваем на 3 этапа:

   1. Концепция и Техническое задание. Составление семантики и написание технических задач для копирайтинга.
   

   В конце этого этапа вы получаете прототипы всех страниц и написанный документ для команды программистов
   Пример прототипа, Технического задания, семантики, Пример ТЗ для SEO текстов отправлю в личное сообщение.

   2. Отрисовка Дизайна сайта согласно прототипу, обязательно для всех стандартных разрешений.

   3. Программирование (верстка и подключение системы управления контентом)
   Когда сайт в работе то вы обязательно сможете отслеживать выполнения работ в реальном времени. Для этого мы даем ссылку на сайт, который на нашем сервере и вы сможете как видеть какие работы проделаны так и тестировать работу сайта.

   Очень заинтересованы в сотрудничестве с Вами.
   

1. proposal concealed by freelancer