当屏幕宽度大于700px时，iframe标签的宽度为400px，高度为225px。如果屏幕宽度小于700px，那么iframe标签的宽度将是屏幕的50%，高度将是屏幕的28.13%。

我试过用这个代码。但不管用。

@media (max-width:700px){.video-container2{
  width: 50%;
  position: relative;
  padding-bottom: 28.13%;
  height: 0;
}.video-container2 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}}

<div style="display: flex; padding: 8px; width: 100%">
    
    <div class="video-container2">
        <iframe frameborder="1" width="400px" height="255px"
        src="https://www.youtube.com/embed/kBcLgP4WJ4I"></iframe>
    </div>
    
    <div style="padding-left: 8px; width: 49.99%;">
        <h5 style="margin-top: -8px;">hwgh hwhwfhwlfhw lgw lh wlh lwfwf</h5>
        <p style="margin-top: -8px; font-size: 10px;">Channel name</p>
        <p style="margin-top: -12px; font-size: 8px;">101 views.</p>
    </div>
</div>

问题出在哪里？