Блог

Главная - Вопросы по программированию - Решение только для CSS для встроенных видеороликов Facebook

Решение только для CSS для встроенных видеороликов Facebook

#html #facebook #css #video

#HTML #Facebook #css #Видео

Вопрос:

Мой сайт / CMS встраивает видеоролики youtube и facebook — [мы сделали их и разместили их там] вместе с письменными сообщениями. До недавнего времени видео на Facebook и YouTube имели размеры 16: 9. Мы бы встроили проигрыватель внутри div с нулевой высотой и сделали вертикальное заполнение 56,25%; — стандартный «трюк», который используют многие сайты. 

 .video__embed {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

Теперь facebook также позволяет размещать видео с другими размерами. Чтобы воспроизвести их, я временно использовал высоту 100% и скрытие переполнения в div FB PLAYER. Он обрезает видео — плохое решение. У нас есть только URL-адрес видео. Следовательно, невозможно узнать размеры до встраивания клипа.

Потратил пару часов, пытаясь придумать решение только для CSS. Calc, похоже, недостаточно. Есть идеи, как рассчитать, скажем, padding-left [и, возможно, / -right], чтобы я мог представить эти клипы не 16: 9 внутри широкого проигрывателя, так же, как HDTV воспроизводит старые фильмы?

Изо всех сил пытаюсь избежать необходимости прибегать к JavaScript, но до сих пор не мог придумать способ сделать это только для CSS. Одна вещь, которая приходит на ум, — это flexbox, но, возможно, потому, что я не знаю, как это использовать … 🙂

Спасибо

Комментарии:

1. Как calc или flexbox помогут вам, если вы не знаете фактическое соотношение сторон видео? Вы не можете адаптировать размеры элементов к значениям, которые вы даже не знаете.

Ответ №1:

Немного покопался.

  1. существует API — oEmbed на http://oembed.com /, который может быть использован из серверной части для определения размеров видео. facebook, youtube и многие другие ресурсы поддерживают его. в долгосрочной перспективе использование oEmbed на серверной части, когда это возможно, вероятно, является лучшим.
  2. как только мы узнаем размеры, margin: 0 auto; может использоваться для центрирования вложений.

в настоящее время мой серверный сервер не извлекает размеры. следовательно, мой «стандартный» css обрезает видео, затем JavaScript корректирует отступы и, при необходимости, ширину. это решение явно уступает тому, чтобы серверная часть предоставляла размеры [просто соотношение] для многих приложений, включая мой сайт, выполненный с помощью Django / Backbone. С ratio, доступным на серверной части, мы могли бы печатать готовый HTML. Для react или angular это, вероятно, не имеет большого значения.

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