Респонсивный блок на всю ширину с Youtube видео без черных границ?

Question

[Alexey]

Каким образом можно поместить iframe во внутрь блока, при этом ширина блока должна быть по ширине всего экрана и высота должна быть зафиксированной (к примеру 300px или 20vh) отсекая при этом черные границы как по-горизонтали, так и по-вертикали?

Возможно есть библиотеки для это реализации, публикации видео в фоне для div-ов?

<div class="video-block">
          <iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/YpDp5Y5X3iU?rel=0&amp&loop=1&controls=0&amp&modestbranding=1&showinfo=0&autoplay=1&controls=0&autohide=1&frameborder=1" allowfullscreen></iframe>
</div>

Comments

[Kovalsky]

Чёрные границы это фон плеера?

[Alexey]

Никита Полевой, Да, это фон внутри плеера. Появляется если видео не "вмещается" в резолюцию контейнера.

[Kovalsky]

Alexey, ну я смотрю уже не актуально, всё решили, да?

[Alexey]

Никита Полевой, Да, вопрос решен.

Answer 1

[Александр Борисович]

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

https://css-tricks.com/NetMag/FluidWidthVideo/Arti...