Видео вместо Фото в Товаре

[gustovapebar]

Добрый день.

Посоветуйте, пожалуйста, бесплатный способ установки видео из ютуб вместо фото в товаре.

Если такого нет, тогда

- как вставить адаптивное видео в описание товара?

Поиск не помог.

Искал блок video в css - не нашел...

Змінено 21 жовтня 2019 користувачем gustovapebar

[Golubenko]

Я этим пользуюсь. На двух сайтах. Проблем нет.

 

 

 

[gustovapebar]

24 minutes ago, Golubenko said:

Я этим пользуюсь. На двух сайтах. Проблем нет.

 

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

А если есть, возможность, бесплатно, вместо фото

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

Змінено 21 жовтня 2019 користувачем gustovapebar

[Drovocek]

 

[Donni]

1 час назад, gustovapebar сказал:

Посоветуйте, пожалуйста, бесплатный способ

 

Выводит ссылку на видео в дополнительных картинках (не в описании). Бесплатно

 

[Donni]

1 час назад, gustovapebar сказал:

Посоветуйте, пожалуйста, бесплатный способ

 

Выводит ссылку на видео в дополнительных картинках (не в описании). Бесплатно

 

[gustovapebar]

HTML:

<div id="video">
	<div class="videoWrapper">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/Zph3K-----" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  	</div>
</div>

 

CSS:

#video {
    max-width: 560px;
    margin: 0 auto;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@Drovocek  Помогите, пожалуйста, сориентироваться.

С хтмл я разобрался, вставить нужно в исходный код в описании товара.

А с css не получилось. Я проверил стили на совпадение со всеми файлами css в папке bootstrap. Нету...

В теме в стайлшит.css тоже нету.

У меня ocstore 3.0.2

п.с.

Или CSS нужно вставить самостоятельно? Если не сложно, в какой файл, в стили шаблона? 

Если да, по после чего (строчки, стиля?) именно?

Я с css еще не имел дело.

Спасибо

Змінено 21 жовтня 2019 користувачем gustovapebar

[gustovapebar]

@Donni Спасибо, за отзывчивость. 

У меня окстор 3.0.2 + установленный шаблон fanes и эти модули не подходят (

Змінено 21 жовтня 2019 користувачем gustovapebar

[gustovapebar]

@Drovocek вставил в стайлшит.цсс - без изменений.

п.с.

Юхуууу, вставил в бустрап.мин.цсс сразу после "embed-responsive video" и заработало!

Спасибо!!!

Змінено 21 жовтня 2019 користувачем gustovapebar

[anboza]

вы, господа, пардон, но это - ЖЕСТЬ!!!

[gustovapebar]

жесть - это просто ваше отношение 

за не имением других вариантов результат остается (единственным) результатом, не смотря на способы достижения

Змінено 21 жовтня 2019 користувачем gustovapebar

[Roman54]

On 10/21/2019 at 7:15 PM, gustovapebar said:

@Drovocek вставил в стайлшит.цсс - без изменений.

п.с.

Юхуууу, вставил в бустрап.мин.цсс сразу после "embed-responsive video" и заработало!

Спасибо!!!

Можете по подробнее объяснить пожалуйста, у меня таже версия okStore и тот же шаблон, мне просто нужно в описание товара вставить видео, я вставляю оно не масштабируется особенно плохо это для смартфонов. Подскажите пожалуйста по подробнее что именно сделать нужно?

[VitUxUi]

В 22.05.2020 в 03:06, Roman54 сказал:

Можете по подробнее объяснить пожалуйста, у меня таже версия okStore и тот же шаблон, мне просто нужно в описание товара вставить видео, я вставляю оно не масштабируется особенно плохо это для смартфонов. Подскажите пожалуйста по подробнее что именно сделать нужно?

 

После вставки видео заходишь в исходный код и видешь <iframe>ссылка на Ютуб  width="664"</iframe>  приведи к виду

 

<Div class="video-resposive"><iframe>ссылка на Ютуб  width="100%"</iframe></div>

 

В css файле темы нужно добавить следующие строки

/Catalog/view/themes/твоя тема/stylesheet.css

 

 

.video-responsive{  
 position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Змінено 20 вересня 2020 користувачем VitUxUi