CSSは高さと幅を固定した要素の比例表示効果を実現します

。コンテンツ {
      マージン: 0 自動;
      高さ：79vh;
      .ビデオボックス{
        位置: 相対的;
        高さ: 100%;
        オーバーフロー: 非表示;
        マージン: 0 自動;
        幅: 79vh*1.778;
        最大幅: 100vw;
        .ad_pic {
          表示: なし;
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 100%;
          高さ: 100%;
          背景: url(6.jpg) 繰り返しなし 中央;
          背景サイズ: 100% 100%;
          画像 {
            幅: 100%;
            高さ: 100%;
          }
          .btn_play {
            表示: インラインブロック;
            .幅(50);
            .高さ(50);
            位置: 絶対;
            左: 50%;
            上位: 50%;
            .左マージン(-25);
            .マージントップ(-25);
            背景: url(../../public/img/icon_play.png) 繰り返しなし 中央;
            背景サイズ: 100% 100%;
          }
        }
        iframe、オブジェクト、埋め込み、ビデオ {
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 100%;
          高さ: 100%;
        }
        .ビデオカード{
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 2px;
          高さ: 1px;
        }
      }
    }

<div class="content">
        <div class="video_box">
            <div class="ad_pic">
                <span class="btn_play"></span>
            </div>
            <ビデオ id="ad_video"
                   自動バッファ
                   src="a.mp4"
                   自動再生
                   プリロード
                   コントロール=""
                   ループ
                   ポスター="6.jpg"
                   webkit-playsinline="true"
                   playsinline="true"
                   x-webkit-airplay="許可"
                   x5-プレイインライン
                   x5-ビデオプレーヤータイプ="h5"
                   x5-ビデオプレーヤーフルスクリーン="true"
                   x5-ビデオの向き="縦"
                   >
            </ビデオ>
        </div>
    </div>