Плеер ютуб адаптивный

[susha]

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

Нашел способ его адаптировать:

 

    <div class="videoWrapper">;
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cHsgHEB_8u8" frameborder="0" allowfullscreen></iframe>
    </div>

и CSS

 

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

Теперь в мобильном устройстве выглядит более менее нормально, а с компьютера плеерище на всю длину экрана с мутным постером. Как это можно исправить? я имею ввиду вернуть в нормальные размеры на компьютере. Подскажите добрые люди.

 

[Agatha65]

https://getbootstrap.com/docs/4.0/utilities/embed/

[zlatoff]

Не стоит сочинять и мудрствовать, в бутстрапе все уже есть!

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="здесь-url-видео" frameborder="0"></iframe>
</div>

Либо поставьте 4by3  если видео 4 на 3.

[susha]

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

Не стоит сочинять и мудрствовать, в бутстрапе все уже есть!

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="здесь-url-видео" frameborder="0"></iframe>
</div>

Либо поставьте 4by3  если видео 4 на 3.

 

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

[zlatoff]

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

 

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

 

Дык правильно, это же бутсраповские классы - они адаптивны (это же просили?) и растекаются по ширине вьюпорта контейнера в котором расположены. Создайте div-контейнер нужной ширины.

[susha]

2 часа назад, zlatoff сказал:

 

Дык правильно, это же бутсраповские классы - они адаптивны (это же просили?) и растекаются по ширине вьюпорта контейнера в котором расположены. Создайте div-контейнер нужной ширины.

 

Сделал так:

 

<div class="smpl-div">
 <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W072U45645iY" frameborder="0"></iframe>
</div>
</div>

и CSS так:

 

.smpl-div {
  margin:10px 20px;
  padding:16px; 
  width:700px;  
}

Так можно делать?

Змінено 8 грудня 2017 користувачем susha

[susha]

Что то сделал не правильно, с мобильного устройства плеер разъехался.

Змінено 8 грудня 2017 користувачем susha

[Agatha65]

.smpl-div {

width:700px;

нельзя добавлять фиксированную width

или ставте бутстраповские класси или пишите оксторе версия и шаблон и я вам сделаю модификатор.

 

[susha]

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

.smpl-div {

width:700px;

нельзя добавлять фиксированную width

или ставте бутстраповские класси или пишите оксторе версия и шаблон и я вам сделаю модификатор.

 

 

Подскажите бутстраповские классы?

Версия ocStore 2.3.0.2 шаблон default

Змінено 10 грудня 2017 користувачем susha

[Agatha65]

если видео будет добавлено в текст нужно добавить ето:

<div class="row">
	<div class="video col-sm-6 col-md-6 col-lg-6">
		<div class="embed-responsive embed-responsive-16by9">
			<iframe class="embed-responsive-item" src="//www.youtube.com/embed/XXXXXXXXXXXXXX"></iframe>
		</div>
	</div>
</div>

XXXXXXXXXXXXXX заменить на video id

если хотите добавлят видео для товаров, можно с етим модификатором:

use-jan-for-product-video.ocmod.xml

В админ в поле jan добавляем только video id и сохраняем.

Сам вивод в карточка товара я сделала после описания.

[susha]

11 минут назад, Agatha65 сказал:

 

<div class="row">
	<div class="video col-sm-6 col-md-6 col-lg-6">
		<div class="embed-responsive embed-responsive-16by9">
			<iframe class="embed-responsive-item" src="//www.youtube.com/embed/XXXXXXXXXXXXXX"></iframe>
		</div>
	</div>
</div>

 

 

Отлично! Спасибо большое!

[vasimov]

On 10.12.2017 at 6:01 PM, Agatha65 said:

если видео будет добавлено в текст нужно добавить ето:

<div class="row">
	<div class="video col-sm-6 col-md-6 col-lg-6">
		<div class="embed-responsive embed-responsive-16by9">
			<iframe class="embed-responsive-item" src="//www.youtube.com/embed/XXXXXXXXXXXXXX"></iframe>
		</div>
	</div>
</div>

XXXXXXXXXXXXXX заменить на video id

если хотите добавлят видео для товаров, можно с етим модификатором:

use-jan-for-product-video.ocmod.xml

В админ в поле jan добавляем только video id и сохраняем.

Сам вивод в карточка товара я сделала после описания.

 

Благодарю Вас за готовое и рабочее решение! Всю сеть перерыл, какие только комбинации стилей не делал - ничего не работало. А надо было лишь на родном форуме в поиске полазить

[dimbays]

В 10.12.2017 в 15:01, Agatha65 сказал:

если видео будет добавлено в текст нужно добавить ето:

<div class="row">
	<div class="video col-sm-6 col-md-6 col-lg-6">
		<div class="embed-responsive embed-responsive-16by9">
			<iframe class="embed-responsive-item" src="//www.youtube.com/embed/XXXXXXXXXXXXXX"></iframe>
		</div>
	</div>
</div>

XXXXXXXXXXXXXX заменить на video id

если хотите добавлят видео для товаров, можно с етим модификатором:

use-jan-for-product-video.ocmod.xml 2 \u043a\u0411 · 21 downloads

В админ в поле jan добавляем только video id и сохраняем.

Сам вивод в карточка товара я сделала после описания.

 

Благодарю! Отличное решение!

Змінено 3 червня 2019 користувачем dimbays