Перейти к содержанию

Рекомендуемые сообщения

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

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

 

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, zlatoff сказал:

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


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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, susha сказал:

 

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;  
}

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

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.smpl-div {

width:700px;

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

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

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Agatha65 сказал:

.smpl-div {

width:700px;

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

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

 

 

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

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

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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 и сохраняем.

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

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 и сохраняем.

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.