Задать вопрос
@ligisayan
javascript

Как сделать так, чтобы высота блока видео с ютуба определялась размерами экрана?

Есть блок с зацикленным видео с ютуба Фидл
<iframe class="inner" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/TP1U4fySrCI?playlist=TP1U4fySrCI&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&origin=http%3A%2F%2Flike2.likemedia.by&widgetid=1"
      id="widget2" style="max-width: 1000%;  width: 100%; height: 785.25px;"></iframe>

Как сделать так, чтобы в зависимости от разрешения экрана высота сама подстраивалась, не обрезалась картинка и не возникало черных полос?
  • Вопрос задан
  • 1100 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
fitvids
Это если вообще ничего самому не писать

Иначе обертка нужна над видеофреймом с ютуба с хаком на css
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Ответ написан
1 комментарий
1 комментарий
@stepelive
Есть вполне удобное средство для быстрого создания адаптивного виджета
dev-assistant.com/youtubewidget
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Никак не сделать. Вы можете изощриться и сделать с iframe некое подобие background-size: cover испсользуя абсолютное позиционирование и трансформации
Ответ написан
4 комментария
4 комментария
SlampD
@SlampD
Так height: 785.25px; зафиксирована же у Вас.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скопировать сайт
19 апр. 2024, в 17:06
15000 руб./за проект
Поправить пхп скрипт
19 апр. 2024, в 16:53
1000 руб./за проект
Требуется настройка Яндекс Директа
19 апр. 2024, в 16:45
5000 руб./за проект
Ещё заказы