Адаптивный дизайн. Ресайз видео

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 factotum » 01.03.2013, 16:47

В общем то все просто. Скрипт смотрит ширину .embed и вмещает в него ифрейм
Код: Выделить всё
jQuery(function() {
  var a = $("iframe[src^='http://www.youtube.com']"), c = $(".embed");
  a.each(function() {
    $(this).data("aspectRatio", this.height / this.width).removeAttr("height").removeAttr("width")
  });
  $(window).resize(function() {
    var b = c.width();
    a.each(function() {
      var a = $(this);
      a.width(b).height(b * a.data("aspectRatio"))
    })
  }).resize()
});
Работает диначно.
Последний раз редактировалось factotum 11.03.2013, 23:56, всего редактировалось 8 раз(а).
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #2 VEG » 01.03.2013, 16:49

Вроде как есть методики и без участия JS:
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Планирую встроить это в BB [media].
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #3 factotum » 01.03.2013, 17:47

VEG:Вроде как есть методики и без участия JS:
примерил.
- пропорции видео не сохраняются
- с выравниванием по центру заморочки. попробовал margin и text-align - работает только в FF. Хром и Опера отказались ценрировать.
погорячился. не уделил внимание position:absolute
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #4 VEG » 01.03.2013, 17:50

factotum:пропорции видео не сохраняются
Не знаю, у меня идеально сохраняются :)
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #5 factotum » 01.03.2013, 17:58

VEG:Не знаю, у меня идеально сохраняются :)
в примере пропорции задаются жестко: padding-bottom:56.25%;
4:3 = 75%;
16:10 = 62,5%
16:9 = 56,25%
...

если видео выше заданных пропорций - фрейм плющит
если видео меньше - под фреймом остается пустота.

Вы как обходите жесткие пропорции?

Добавлено спустя 4 минуты 35 секунд:
подправил вопрос
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #6 VEG » 01.03.2013, 18:19

factotum, ну в BB [media] я очевидно пропорцию буду на js высчитывать :) Просто после того, как уже дело сделано (соотношение вычислено) — js скрипт становится не нужен, браузер сам вычисляет размеры фрейма.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #7 factotum » 01.03.2013, 18:32

VEG,
это Вы приглашаете заглянуть в исходники BB[media]?)
представляют так:
скрипт находит код Embedded -> вытягивает с ютьюба параметры -> парсит/ресайзит.
в этом случае зачем заморочки с CSS? Достаточно добавить пару строчек коллбека разрешения экрана.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #8 VEG » 01.03.2013, 19:10

factotum, сейчас BB [media] вообще никак не смотрит размеры на youtube.com — пользователь сам указывает размеры если хочет, а если нет — берутся стандартные 16:9 плюс 30 пикселей по высоте на элементы управления. А заморочки с CSS чтобы уменьшить количество выполняемого кода на JS :)
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #9 factotum » 01.03.2013, 21:57

VEG:вообще никак не смотрит размеры
а я вот парюсь :razz:
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #10 factotum » 10.12.2013, 10:21

В свете отказа от jQuery вернулся к теме видео.
Получилось так:
Код: Выделить всё
window.fluidVid = (function (window, document, undefined) {

  'use strict';

  var players, obj;

  var _matchesPlayer = function (source) {
    players = new RegExp('^(https?:)?\/\/(?:' + obj.join('|') + ').*$', 'i');
    return players.test(source);
  };

  var _render = function (elem) {
    var wrap = document.createElement('div');
    var thisParent = elem.parentNode;
    var ratio = (parseInt(elem.height ? elem.height : elem.offsetHeight, 10) /
      (parseInt(elem.width ? elem.width : elem.offsetWidth, 10)) * 100);

    thisParent.insertBefore(wrap, elem);
    elem.className += ' fluidvid-item';
    wrap.className += ' fluidvid';
    wrap.style.paddingTop = ratio + '%';
    wrap.appendChild(elem);
  };

  var init = function (object) {
    var options = object || {};
    var selector = options.selector || 'iframe';
    obj = options.players || ['www.youtube.com', 'player.vimeo.com'];
    var nodes = document.querySelectorAll(selector);
    for (var i = 0; i < nodes.length; i++) {
      var self = nodes[i];
      if (_matchesPlayer(self.src)) {
        _render(self);
      }
    }
  };

  return {
    init: init
  };

})(window, document);
CSS:
Код: Выделить всё
.fluidvid {
   width: 100%;
   position: relative;
}

.fluidvid-item {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Инициализация:
Код: Выделить всё
fluidVid.init({
    selector: 'iframe',
    players: ['www.youtube.com']
});

Настраивается, сохраняет пропорции видео, быстро и просто.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев


Вернуться в Мастерская 1.x



cron