Помогите решить проблему с адаптивностью встраиваемого с видеохостингов (ютуб и др.) видео в статьях.
Для видео в комментариях и на форуме, встраиваемое через bb, нашел решение, в стилях прописал
.bb_tag_video embed, .bb_tag_video iframe {max-height: auto;max-width: 100%;}
И все работает, на смартфонах видео сжимается по ширине экрана.
А вот с видео, которое встраивается через редактор в тело статьи, бьюсь уже сколько дней и никак не соображу, что прописать в стилях, чтобы оно тоже стало адаптивным.
#1
9 апреля 2016 в 15:39
#2
9 апреля 2016 в 15:40
версия системы какая?
#3
9 апреля 2016 в 15:42
извиняюсь, 1.10.6
Сегодня в 08:29
#4
9 апреля 2016 в 16:16
al955, мой шаблон?
встраивайте видео внутрь <div class="video-responsive">сюда</div>
а в style.css в самом конце добавьте
встраивайте видео внутрь <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%; }
#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>
Правильно я делаю?
<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
Спасибо, что направили на нужный путь
#12
9 апреля 2016 в 18:24
al955, вам спасибо, внесу во все шаблоны свои
#13
17 апреля 2016 в 20:55
Подниму тему адаптивности.
Кто нибудь знает, можно ли сделать адаптивными виджеты Яндекса. В частности, интересует виджет Яндекс-Деньги:
money.yandex.ru/embed/quickpay/shop.xml
В стилях пытался работать с .b-widget-commercial (так в стилях Яндекса прописано), ничего не получается.
Кто нибудь знает, можно ли сделать адаптивными виджеты Яндекса. В частности, интересует виджет Яндекс-Деньги:
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%;
}
не работает
Какие будут соображения
Этот плагин работает через bb-редактор, видео, вставляется через теги [media][/media]. Видео, вставленное через этот плагин неадаптивно.
Пробовал в стилях прописать
.bb_tag_media embed, .bb_tag_media iframe {
height: auto;
width: 100%;
}
не работает
Какие будут соображения