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

Опубликовано: 2019-11-21
Просмотров: 967
Настроение: Рабочее
+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)

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

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

samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9
samson
Публикую несколько бесплатных онлайн сервисов необходимых в работе, которые помогут мастерам протестировать...
2 - +6
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
samson
Так как многих давно интересовало как сделать суффиксы модулей для Джумла в Artisteer 4.1-4.2 то выкладываю...
7 - +11