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

Масштабирование видео из youtube и автоплэй


Recommended Posts

Добрый день.

Вставляю видео в карточку товара, взятое из youtube.

Редактор удаляет allow="autoplay".

Как убрать это недоразумение.

И как сделать автоматическое изменение масштаба блока с видео.

По умолчанию, из-за не масштабирования, появляется полоса прокрутки.

Спасибо.

Edited by Esox
Link to post
Share on other sites

Обрамляем вставку видео (фрейм) 

<div class="thumb-wrap"> 
<iframe ....></iframe> 
</div>

стили 

.thumb-wrap { 
position: relative; 
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
} 

.thumb-wrap  iframe,
.thumb-wrap  object,
.thumb-wrap  embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

давно пользуюсь данным приемом в своем онлайн кинотеатре, работает на 100%

  • +1 2
Link to post
Share on other sites

36 minutes ago, Esox said:

И как сделать автоматическое изменение масштаба блока с видео.

https://getbootstrap.com/docs/3.3/components/#responsive-embed

16:9 aspect ratio

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

пример:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>

?rel=0 добавляем после ид чтоби не показивало связанние видео по окончание основного видео.

  • +1 3
Link to post
Share on other sites

Спасибо вам огромное.

Оставил Пашин вариант.

В Пашином, видео тоже масштабируется.

Паше спасибо, не первый раз выручает.

Агата 65 вам тоже поклон.

 

 

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.