Резиновое видео на сайт

Опубликовано: 2019-09-18
Просмотров: 933
Настроение: Рабочее
+1
: 1
При создании резинового сайта возникает проблема вставки динамичных элементов, видео, флеш и т.д.Предлагаю простое решение найденное мной в интернете, оно подходит для размещения кодов видео YouTube и других подобных. Оформляем полученный код с YouTube в контейнер <div class="video-container">, не забывая закрыть его после кода так:

Код PHP:
  1. <div class="video-container">
  2. <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
  3. </div>
Дальше в ваш файл .css стилей добавляем оформление так:

Код PHP:
  1. .video-container {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 30px;
  5. height: 0;
  6. overflow: hidden;
  7. }
  8.  
  9. .video-container iframe,
  10. .video-container object,
  11. .video-container embed {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. height: 100%;
  17. }
Все ваше видео теперь будет резиновым во всех браузерах.
Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное из блогов

artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
artnikov
Доброго всем здоровья! что единственное самое главное, а остальное, как нибудь получится. После...
13 - +6
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
skaz
Как подключить к Joomla не стандартный слайдер новостей, слайд шоу картинок. В интернете очень много...
9 - +6