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

Опубликовано: 2019-03-19
Просмотров: 836
Настроение: Рабочее
+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
Так как многих давно интересовало как сделать суффиксы модулей для Джумла в Artisteer 4.1-4.2 то выкладываю...
7 - +11
skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6
artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7