Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

 

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

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

 

Link to post
Share on other sites

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

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

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

  • +1 1
Link to post
Share on other sites

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

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


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

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

 

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

Link to post
Share on other sites

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

 

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

 

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

  • +1 1
Link to post
Share on other sites

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

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

Edited by susha
Link to post
Share on other sites

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

Edited by susha
Link to post
Share on other sites

.smpl-div {

width:700px;

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

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

 

  • +1 1
Link to post
Share on other sites
1 час назад, Agatha65 сказал:

.smpl-div {

width:700px;

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

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

 

 

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

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

Edited by susha
Link to post
Share on other sites

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

<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
Link to post
Share on other sites
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>

 

 

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

  • 1 year later...
В 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 и сохраняем.

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

 

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

Edited by dimbays
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.