Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Заметки на полях...

  • запис
    1
  • коментарів
    16
  • переглядів
    1 738

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


ibond

4 925 переглядів

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 6

16 коментарів


Recommended Comments

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

Надіслати
8 минут назад, pimur сказал:

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


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

width="100%"

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

Надіслати

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

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

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

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

Надіслати
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

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

Надіслати
15 минут назад, timled сказал:

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

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

Надіслати
7 минут назад, timled сказал:

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

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

Надіслати

Очень схоже с моей проблемой, огромный респект за подсказку заранее. Есть ссылка на 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 користувачів

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.