Почему при попытке адаптировать и спозиционировать видео оно теряет все размеры?

Question

[Полина Емельянова]

Здравствуйте коллеги!
Прошу, поясните, что я делаю не так? Я просмотрела все темы по данному вопросу на Тостере, но не могу понять: почему, при попытке адаптировать и спозиционировать видео - оно теряет все размеры?
Попытка дать обертке - инлайн-блок/флекс(родителю, ага)/флоат, чтобы сделать сетку - факап!!!

Увидеть и по торогать:
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;
}

Заранее ОГРОМНОЕ СПАСИБО!!!

Comments

[Сергей Мурзин]

А зачем у .vidres высота в 0?

[Сергей Мурзин]

И overflow: hidden;

[Полина Емельянова]

Высота 0 - т.к. есть паддинг, который эту высоту дает и распяливает контейнер... По идее оно так и работает, именно это дает адаптивность.

Хидден - чтобы видео-фрейм не вывалился из контейнера...

[alvvi]

Полина Емельянова: а как вы пытались позиционировать видео? Инлайн блок естественно скроет видео, потому что паддинг-боттом/топ не действует на инлайновые элементы.

[alvvi]

Полина Емельянова: проверил на вашем пэне, без инлайна у видео все рабоатет как надо, как мне кажется.

[Полина Емельянова]

Илья Ростопка: дык... И флоат его скрывает... Даже флекс... Чего-то я упускаю...

[Полина Емельянова]

Я не понимаю... ПОЧЕМУ!!!!???? Оно работвает в примерах, например, тут
https://html5book.ru/adaptivnoe-video/

Мне же приходится прописывать КУЧУ медиа-запросов. Хотя структура разметки и код - тотже, ....

Answer 1

[Руслан Полин]

Я не знаю как, но у меня заработало. Хотя, кто знает, может только у меня. jsfiddle
а вот с вашим кодом jsfiddle
Кстати, они в примере тоже используют медиа запросы.

Comments

[Полина Емельянова]

Руслан, прошу вас, уточните - вы завернули видео-блок в доп обертку, как я вижу... и двигали уже именно эту обертку, так?

[Руслан Полин]

Полина Емельянова: я изменил ответ, посмотрите, это работает и с вашим кодом.

[Руслан Полин]

Полина Емельянова: дополнительная обертка и не нужна, можно удалить с ней стили и ничего не изменится. Просто попытался повторить то, что сделано у них, покопавшись в исходном коде. Как можно видеть, вы задали немного не то поведение блокам. Они не должны быть инлайновыми. Да и размеры нужно брать относительные, а не жесткие в пикселях.

[Полина Емельянова]

Кааатся поняла свой факап....
ШИРИНА!!! Задавать надо жестко, но в %. Т.е. никаких max-width тут не прокатит...

[Руслан Полин]

Полина Емельянова: Если делаете адаптивно, то используйте проценты. ) Рад был помочь.)