html - 调整响应式嵌入式视频内容的大小

Question

我正在尝试嵌入视频并使其具有移动响应能力。但是，每当我缩小时，视频的内容会变小，但视频播放器栏/控件保持相同的宽度？我是 HTML/CSS 新手，所以请耐心等待。

视觉视频播放器

/* How It Works CSS*/

.iframecontainer{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 100%;
}
.iframecontainer iframe{

  position: absolute;
  padding-top: 150px;;
  padding-left: 50px;
  padding-right: 50px;
  
  width: 100%;
  height: 100%;
}

<!-- How It Works HTML-->
    <div class="videocontainer">
        <div id="howitworks"class="iframecontainer">
          <iframe 
            src="animation.mp4" frameborder="0">
          </iframe>      
        </div>
    </div>