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

Опубликовано: 2020-07-05
Просмотров: 1045
Настроение: Рабочее
+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
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6
samson
Публикую несколько бесплатных онлайн сервисов необходимых в работе, которые помогут мастерам протестировать...
2 - +6
artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6