Респосив Видео

Добрый день, пишу по поводу респосив видео, мне дали инструкцию, как его делать таковым, но я не могу понять один нюанс, подскажите, пожалуйста.

#5

eComLabs, on 15 Jan 2016 - 6:19 PM, said:

C youtube вставляете? Вот ссылка, где описывается как сделать его риспонсив

https://css-tricks.c...dWidthVideo.php

Я так понял, что видео нужно вставлять вот таким образом:

Но тут также указано вот это:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Куда это вставлять? (Без этой части кода не работает, а если вставить просто в код, то читается как текст)
Или что с этим кодом делать?
Спасибо!

День добрый.

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Данный код необходимо вставить в "Пользовательский CSS" ( Панель аминистратора -> Дизайн -> Темы -> Редактировать дизайн ->Пользовательский CSS ).

С уважением,

Команда CS-Market.

День добрый.

Данный код необходимо вставить в "Пользовательский CSS" ( Панель аминистратора -> Дизайн -> Темы -> Редактировать дизайн ->Пользовательский CSS ).

С уважением,

Команда CS-Market.

Спасибо, получилось, но теперь другая проблема – текст съезжает, а в исходном варианте по ссылке

https://css-tricks.c...dWidthVideo.php не съезжает, подскажите, пожалуйста, в чем может быть дело?

https://yadi.sk/i/1MB0Zf9dnLWB7
https://yadi.sk/i/IpU5siiTnLWAu

https://yadi.sk/i/atjoUpOdnLWAk

https://yadi.sk/i/wErJhUFDnLWEA

Спасибо, получилось, но теперь другая проблема – текст съезжает...

Скиньте пожалуйста ссылку на проблему, мы посмотрим и подскажем решение.

С уважением,

Команда CS-Market.

Скиньте пожалуйста ссылку на проблему, мы посмотрим и подскажем решение.

С уважением,

Команда CS-Market.

http://duhpoleta.ru/rc-modeli/radioupravlyaemye-modeli-tankov/test-video

Вот тут, при сужении окна текст съезжает в сторону видео

http://duhpoleta.ru/...nkov/test-video

Сейчас у Вас текст находится в

, класс у которого предназначен для видео. Уберите класс у этого блока и всё будет хорошо.

С уважением,

Команда CS-Market.

Сейчас у Вас текст находится в

, класс у которого предназначен для видео. Уберите класс у этого блока и всё будет хорошо.

С уважением,

Команда CS-Market.

Получилось, спасибо!

Я также заметил, что можно сделать вот таким образом:

Чтобы при широком экране отображалось два видео в одну строку, а при сужении экрана видео перескакивает на следующую.

Вопрос: можно ли сделать чтобы оно перескакивало и потом уже становилось респонсив, то есть чтобы на компьютере отображалось 2 видео в строку, а на мобильном устройстве, одну в строку и было респонсив.

https://yadi.sk/i/sJFCfVGUnQ44Y
https://yadi.sk/i/UeTsU0N6nQ44E

А то получается, что видео на всю ширину независимо от ширины страницы, и получается не очень: https://yadi.sk/i/RV2uXjOenQ44v

Заранее спасибо!

Попробуйте к классу videoWrapper добавить класс ty-column2

Попробуйте то, что предложили eComLabs. Мы считаем это самым лаконичным решением Вашей ситуации.

С уважением,

Команда CS-Market.

Попробуйте к классу videoWrapper добавить класс ty-column2

ty-column2 добавить в код самого товара или в CSS?

ty-column2 добавить в код самого товара или в CSS?

В код самого товара.

C уважением,

Команда CS-Market.

В код самого товара.

C уважением,

Команда CS-Market.

Спасибо большое! Получилось, но еще пара нюансов:

Как сделать промежуток между видео? А то они слились в одно: https://yadi.sk/i/aGSIPB5znRs2C

И еще заметил интересную особенность:

При сужении окна в определенный момент видео перескакивает на другую строку и получается 1 видео в 1 строку, как и должно быть, однако, при дальнейшем сужении они опять выстраиваются в 2 строки:

https://yadi.sk/i/-knzewCNnRs55
https://yadi.sk/i/SsobMLgOnRs2U
https://yadi.sk/i/aGSIPB5znRs2C

Тем не менее, если открыть с телефона, то получается нормально: https://yadi.sk/i/0zEgEKrTnRtFK

Попробуйте

Попробуйте

Спасибо большое, пришел к решению делать в 1 столбец

Здравствуйте!

Мы выпустили модуль YouTube. С ним вы сможете легко загружать видео для товаров и создавать видео галереи.

Если появятся вопросы, я с удовольствием на них отвечу.

Здравствуйте!

Мы выпустили модуль YouTube. С ним вы сможете легко загружать видео для товаров и создавать видео галереи.

Если появятся вопросы, я с удовольствием на них отвечу.

Спасибо!