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

#1 9 апреля 2016 в 15:39
Помогите решить проблему с адаптивностью встраиваемого с видеохостингов (ютуб и др.) видео в статьях.

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

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

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

А вот с видео, которое встраивается через редактор в тело статьи, бьюсь уже сколько дней и никак не соображу, что прописать в стилях, чтобы оно тоже стало адаптивным.
#2 9 апреля 2016 в 15:40
версия системы какая?
#3 9 апреля 2016 в 15:42
извиняюсь, 1.10.6
#4 9 апреля 2016 в 16:16
al955, мой шаблон?

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

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

  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. }
#5 9 апреля 2016 в 16:38
Да, ваш
#6 9 апреля 2016 в 16:43
Попробовал. Не работает
#7 9 апреля 2016 в 16:48
должно, если в css все прописали
дайте доступ в админку, попробую сам
#8 9 апреля 2016 в 16:58
Я вставляю прямо в редакторе в режиме "Источник"

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

Правильно я делаю?
#9 9 апреля 2016 в 17:01
Все, сделал. Только вот так заработало:

  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.  
#10 9 апреля 2016 в 17:06
А с "родным" div-ом вот так должно быть:

  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. }
#11 9 апреля 2016 в 17:06
Спасибо, что направили на нужный путь smile
#12 9 апреля 2016 в 18:24
al955, вам спасибо, внесу во все шаблоны свои
#13 17 апреля 2016 в 20:55
Подниму тему адаптивности.

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

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

В стилях пытался работать с .b-widget-commercial (так в стилях Яндекса прописано), ничего не получается.
#14 17 апреля 2016 в 21:13
Можете просто сверстать свою форму, и передать все нужные переменные в пост запросе на следующую страницу.
Но проблема что конечная страница в любом случае на яндексе и она не адаптивная.
#15 1 мая 2016 в 11:03
Продолжу вопросы по адаптивности. У меня стоит плагин "p_bb_media — вставка доверенного медиа-контента " вот этот — instantcms.ru/forum/thread15545.html

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

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

.bb_tag_media embed, .bb_tag_media iframe {

height: auto;
width: 100%;
}

не работает

Какие будут соображения
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.