Resizable Video With a Fixed Aspect Ratio

This CSS Reference section displays the code for an example that illustrates how to create a resizable video player with a fixed aspect ratio. Below, the same video is embedded three times, each with a different resolution. The resolution is controlled via the width and the aspect ratio is maintained via the padding-top percentage specification of the div that contains the iframe for the video.

ResizableVideoWithFixedAspectRatio.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net</title>
    <style type="text/css">
      #idMainContainer {
        width:700px;
        background-color: rgba(225, 225, 225, 1);
      }
      #idWidth200 {
        width:200px;
      }
      #idWidth400 {
        width:400px;
      }
      #idWidth700 {
        width:700px;
      }
      .cAspect16x9 {
        position: relative;
        width:100%;
        height:0px;
        /* percentages are relative to the width. */
        padding-top: 56.25%;
        overflow: hidden;
      }
      #idVideo {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body style="margin:0px;">
    <div id="idMainContainer">
      <div id="idWidth200">
        <div class="cAspect16x9">
          <iframe id="idVideo" width="1280" height="720"
            src="https://www.youtube.com/embed/wz_sne7nQHo" frameborder="0">
          </iframe>;
        </div>
      </div>
      <div id="idWidth400">
        <div class="cAspect16x9">
          <iframe id="idVideo" width="1280" height="720"
            src="https://www.youtube.com/embed/wz_sne7nQHo" frameborder="0">
          </iframe>;
        </div>
      </div>
      <div id="idWidth700">
        <div class="cAspect16x9">
          <iframe id="idVideo" width="1280" height="720"
            src="https://www.youtube.com/embed/wz_sne7nQHo" frameborder="0">
          </iframe>;
        </div>
      </div>
    </div>
  </body>
</html>

Core CSS

Resizable Video With a Fixed Aspect Ratio

ResizableVideoWithFixedAspectRatio.html

Output