Why does it lose all dimensions when trying to adapt and position the video?

Question

css

Hello colleagues!
Please explain what am I doing wrong? I looked through all the topics on this issue on the Toaster, but I can not understand: why, when trying to adapt and position the video, does it lose all dimensions?
Trying to give the wrapper an inline-block/flex(parent, huh)/float to make a grid - fuckup!!!
See and touch:
codepen.io/emelyanova/pen/ZeaPrm Too
lazy:

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

Thank you very much in advance!!!

Answer 1

I don't know how, but it worked for me. But who knows, maybe it's just me. jsfiddle
but with your jsfiddle
code By the way, they also use media queries in the example.