Адаптивность видео

 
Посетитель
small user social cms
Медаль
Сообщений: 349
Помогите решить проблему с адаптивностью встраиваемого с видеохостингов (ютуб и др.) видео в статьях.

Для видео в комментариях и на форуме, встраиваемое через bb, нашел решение, в стилях прописал

.bb_tag_video embed, .bb_tag_video iframe {max-height: auto;max-width: 100%;}

И все работает, на смартфонах видео сжимается по ширине экрана.

А вот с видео, которое встраивается через редактор в тело статьи, бьюсь уже сколько дней и никак не соображу, что прописать в стилях, чтобы оно тоже стало адаптивным.
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2599
версия системы какая?
Надежный быстрый хостинг
Посетитель
small user social cms
Медаль
Сообщений: 349
извиняюсь, 1.10.6
Посетитель
small user social cms
Медаль
Сообщений: 659
al955, мой шаблон?

встраивайте видео внутрь <div class="video-responsive">сюда</div>

а в style.css в самом конце добавьте

Код PHP:
  1. .video-responsive {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. height: 0;
  5. overflow:hidden;
  6. }
  7. .video-responsive iframe,
  8. .video-responsive object,
  9. .video-responsive embed {
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. }
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Медаль
Сообщений: 349
Да, ваш
Посетитель
small user social cms
Медаль
Сообщений: 349
Попробовал. Не работает
Посетитель
small user social cms
Медаль
Сообщений: 659
должно, если в css все прописали
дайте доступ в админку, попробую сам
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Медаль
Сообщений: 349
Я вставляю прямо в редакторе в режиме "Источник"

<div class="video-responsive">КОД ВИДЕО</div>

Правильно я делаю?
Посетитель
small user social cms
Медаль
Сообщений: 349
Все, сделал. Только вот так заработало:

Код PHP:
  1. @media screen and (max-width:380px) {
  2. .video-responsive {
  3. position: relative;
  4. padding-bottom: 56.25%;
  5. height: 0;
  6. overflow:hidden;
  7. }
  8. .video-responsive iframe,
  9. .video-responsive object,
  10. .video-responsive embed {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
  17.  
Посетитель
small user social cms
Медаль
Сообщений: 349
А с "родным" div-ом вот так должно быть:

Код PHP:
  1. @media screen and (max-width:380px) {
  2. .embeddedContent {
  3. position: relative;
  4. padding-bottom: 56.25%;
  5. height: 0;
  6. overflow:hidden;
  7. }
  8. .embeddedContent iframe,
  9. .embeddedContent object,
  10. .embeddedContent embed {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
Посетитель
small user social cms
Медаль
Сообщений: 349
Спасибо, что направили на нужный путь smile
Посетитель
small user social cms
Медаль
Сообщений: 659
al955, вам спасибо, внесу во все шаблоны свои
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Медаль
Сообщений: 349
Подниму тему адаптивности.

Кто нибудь знает, можно ли сделать адаптивными виджеты Яндекса. В частности, интересует виджет Яндекс-Деньги:

https://money.yandex.ru/embed/quickpay/shop.xml

В стилях пытался работать с .b-widget-commercial (так в стилях Яндекса прописано), ничего не получается.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2551
Можете просто сверстать свою форму, и передать все нужные переменные в пост запросе на следующую страницу.
Но проблема что конечная страница в любом случае на яндексе и она не адаптивная.
Посетитель
small user social cms
Медаль
Сообщений: 349
Продолжу вопросы по адаптивности. У меня стоит плагин "p_bb_media - вставка доверенного медиа-контента " вот этот - http://www.instantcms.ru/forum/thread15545.html

Этот плагин работает через bb-редактор, видео, вставляется через теги [media][/media]. Видео, вставленное через этот плагин неадаптивно.

Пробовал в стилях прописать

.bb_tag_media embed, .bb_tag_media iframe {

height: auto;
width: 100%;
}

не работает

Какие будут соображения
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.