Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart
  • запись
    1
  • комменириев
    16
  • просмотров
    1 297

Адаптивное YouTube вигдео с iframe.

ibond

Запись опубликовал ibond ·

4 191 просмотр

 Погделиться

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

 

 

 

  • +1 5
 Погделиться

16 комменириев

Рекомендованные комменирии

NastyaKIt

Круть, все срилиило!!! Спасипотому что за полезную информацию и отгдельное огромнейшее спасипотому что за то, что разъяснили чайнику, как и ггде это все применить!

Ссылка на комменирий
ibond
8 минут назад, pimur сказал:

Зачем? если доситочно  

width="560" заменить на 
width="100%"

Вы попробуйте сначала.

Ссылка на комменирий
pimur

Не ну если уж не хочется менять локальное width, а хочется стилями

на примере синдартной верстки шаблона для товара 

#tab-description iframe {
    max-width: 560px!important;
    width: 100%!important;
}

Не пойму, к чему обертки лишние?

Ссылка на комменирий
pimur
29 минут назад, ibond сказал:

Или Вы потроллить пришли?

Ни в коем случае.

https://drive.google.com/file/d/1KW9y7yCkrdsliepvoXO9zNdz1AoQv8r-/view?usp=sharing

Но просто же есть, для этого специально обученная галочка

https://drive.google.com/file/d/15PWfoL2UWwqQ6uFXpH9Nbvwc3LODDGcU/view?usp=sharing

Если я конечно правильно Вас понял.

http://demo.pimur.ru/index.php?route=product/product&product_id=45

Если вы о об этом не знали, ик прекрасно же, теперьь знаете. Ну и все же вы написали же в публичный блог, ради чего - что бы просто все промолчали? Я же не преследую этоли оскорбить или высивить вас в неловкое положение. Просто показал что есть и другой вариант, попроещё и с меньшей разметкой.

Ссылка на комменирий
ibond
15 минут назад, timled сказал:

но вигдео не адаптируется под экран

не адаптируется, ик как стилей (CSS) нет для элементов

Ссылка на комменирий
ibond
7 минут назад, timled сказал:

Почему то не наследует. Или это к шаблону вопросы?

Я Вам четкий ответ дал – стили не присвоены. Возможно кеш ггде-то или что-то и т.д. или шаблон... Да все что угодно, гадать не умею.

Ссылка на комменирий
Vitaliy023

Очень схоже с моей проблемой, огромный респект за подсказку заранее. Есть ссылка на jpg размером 1100 на 880 с привязанными интерактивными точками - анноициями. Всивляю в описание товара (кодом ниже), окно адаптируется под разные устройства, изображение в нем нет. Можно решить?

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://annotatepro.mockflow.com/embed.jsp?id=M642a58f92a2b86a4021e70495ce32b6e1554209322465"></iframe>
</div>

Ссылка на комменирий

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккауни. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите згдесь.

Войти сейчас

  • Сейчас на страниэто   0 пользователей

    • Нет пользователей, просматривающих эту страницу.

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

×
×
  • Создать...

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

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

  Я принимаю