@ligisayan

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

Есть блок с зацикленным видео с ютуба Фидл
<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>

Как сделать так, чтобы в зависимости от разрешения экрана высота сама подстраивалась, не обрезалась картинка и не возникало черных полос?
  • Вопрос задан
  • 1022 просмотра
Решения вопроса 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%;
}
Ответ написан
@stepelive
Есть вполне удобное средство для быстрого создания адаптивного виджета
dev-assistant.com/youtubewidget
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Никак не сделать. Вы можете изощриться и сделать с iframe некое подобие background-size: cover испсользуя абсолютное позиционирование и трансформации
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы