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

1
2
Следующая
Показаны 1-15 из 25

#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

Сегодня в 20:07

#4 9 апреля 2016 в 16:16

al955, мой шаблон?

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

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

.video-responsive { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden; 
} 
.video-responsive iframe, 
.video-responsive object, 
.video-responsive embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
}

шаблоны и модули для instantCMS 1.10.6

#5 9 апреля 2016 в 16:38

Да, ваш

#6 9 апреля 2016 в 16:43

Попробовал. Не работает

#7 9 апреля 2016 в 16:48

должно, если в css все прописали
дайте доступ в админку, попробую сам

шаблоны и модули для instantCMS 1.10.6

#8 9 апреля 2016 в 16:58

Я вставляю прямо в редакторе в режиме "Источник"

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

Правильно я делаю?

#9 9 апреля 2016 в 17:01

Все, сделал. Только вот так заработало:

 @media screen and (max-width:380px) {
.video-responsive { 
      position: relative; 
      padding-bottom: 56.25%; 
      height: 0; 
      overflow:hidden; 
    } 
    .video-responsive iframe, 
    .video-responsive object, 
    .video-responsive embed {
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%;
      height: 100%; 
}

#10 9 апреля 2016 в 17:06

А с "родным" div-ом вот так должно быть:

@media screen and (max-width:380px) {
.embeddedContent { 
      position: relative; 
      padding-bottom: 56.25%; 
      height: 0; 
      overflow:hidden; 
    } 
    .embeddedContent iframe, 
    .embeddedContent object, 
    .embeddedContent embed {
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%;
      height: 100%; 
}

#11 9 апреля 2016 в 17:06

Спасибо, что направили на нужный путь smile

#12 9 апреля 2016 в 18:24

al955, вам спасибо, внесу во все шаблоны свои

шаблоны и модули для instantCMS 1.10.6

#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%;
}

не работает

Какие будут соображения

1
2
Следующая
Показаны 1-15 из 25

Как переместить блок комментар

Не работает компонент переписк

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

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

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Шаблон Modern адаптивность iframe

адаптивность таблицы

Объявления AdSense в плеере компонента iVideo

[ЕСТЬ РЕШЕНИЕ] Шаблон modern. Почему в одних типах контента видео адаптивное, а в других - нет ?

Нет перевода строки после видео в Redactor + прилипают видео

Вёрстка и адаптивность

InstantCMS Team

О проекте

Поддержка

Дополнения