Здравствуйте коллеги!
Прошу, поясните, что я делаю не так? Я просмотрела все темы по данному вопросу на Тостере, но не могу понять: почему, при попытке адаптировать и спозиционировать видео - оно теряет все размеры?
Попытка дать обертке - инлайн-блок/флекс(родителю, ага)/флоат, чтобы сделать сетку - факап!!!
Увидеть и по торогать:
codepen.io/emelyanova/pen/ZeaPrm
Кому лень:
<div class="blog__row">
<div class="blog__video">
<div class="vidres">
<iframe src="https://www.youtube.com/embed/oCDytPM_T6Q"></iframe>
</div>
</div><!-- END BLOG__VIDEO -->
<div class="blog__nav">
<ul class="blog__nav-list">
<li class="blog__nav-item blog__nav-item--active">
<a class="blog__nav-link">Дропшипинг</a>
</li>
<li class="blog__nav-item">
<a href="#" class="blog__nav-link">Выбор ниши</a>
</li>
<li class="blog__nav-item">
<a href="#" class="blog__nav-link">Продвижение</a>
</li>
</ul>
</div><!-- END BLOG__NAV -->
</div><!-- END BLOG__ROW -->
.blog__video {
display: inline-block;
vertical-align: middle;
max-width: 700px;
}
.blog__nav {
display: inline-block;
vertical-align: middle;
max-width: 300px;
}
.vidres iframe, .vidres embed, .vidres object {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.vidres {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
Заранее ОГРОМНОЕ СПАСИБО!!!
