#css #flexbox #video-streaming #responsive
Вопрос:
Как растянуть встроенное видео так, чтобы оно полностью заполнило зеленое поле, сохранив при этом соотношение сторон?
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: lightgreen;
}
.flex-item-right {
background-color: dodgerblue;
flex: 1;
display: flex;
justify-content:center;
align-items:center;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 400px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
<div class="flex-container">
<div class="flex-item-left">
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/436720811' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="flex-item-right">
<span>
<h3>Video Title</h3>
<p>Video Description</p>
<button>go to product</button>
<span>
</div>
</div>