Изменение размера iFrame динамически с шириной 100% - PullRequest
Новая
       11

Изменение размера iFrame динамически с шириной 100%

0 голосов
/ 02 сентября 2011

У меня на сайте много встроенных iFrames от Vimeo. Я нахожусь в процессе его доработки и мне нужно, чтобы они все соответствовали новому дизайну.

Я могу легко подогнать ширину, установив для них ширину 100%, но высоты все разные ... как я могу изменить их размер и сохранить соотношение?

Спасибо !!

Ответы [ 2 ]

1 голос
/ 02 сентября 2011

Используя jquery, вы можете получить ширину и высоту фрейма примерно так: 

w = $("#iframe").width();
h = $("#iframe").height();

С помощью этой информации вы можете рассчитать соотношение сторон данного iframe (соотношение = w / h).Затем вы можете рассчитать новую ширину или высоту для каждого фрейма.Я предполагаю, что ваш дизайн будет (по сути) ограничивать ширину каждого кадра, так что вы можете также использовать это в качестве базовой линии -> newHeight = ratio * maxWidth

Теперь у вас есть новые измерения, и выможно установить их соответствующим образом.

0 голосов
/ 02 сентября 2011

Почему вы хотите установить ширину видео на 100%, а не только фактическую ширину видео?

Я предполагаю, что перед записью каждого элемента iframe вы могли бы:

  1. Получите высоту и ширину для каждого видео с помощью API Vimeo, например, http://vimeo.com/api/v2/video/8564338.json.

  2. Установите высоту iframe как videoHeight * window.innerWidth / videoWidth (или что-то подобное!)

Выглядит довольно нахально для меня ...

...