CSS RWD Videos

Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.

When a fixed width or height of a video is specified, it may cause layout issue, such as breaking page layouts, distorting the image, or displaying black bars around the video. The black bars around the video are called letterboxing (on top and bottom of the video), pillarboxing (on left and right of the video), and windowboxing (on all sides of the video).

CSS RWD Videos - width Property

To make a video responsive and fluid, the width property of the video is set to a percentage value, along with height property set to auto.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   video {
      width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the size of the video player will scale.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD Videos - max-width Property

To make a video responsive and fluid, the max-width property of the video is set to a 100%, which will let the video get scaled down to the extent it is set, but will never scale up more than its original size.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   video {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the size of the video player will scale.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD Videos - Within a grid

The following example demonstrates the use of a responsive video within a grid column. Based on the max-width value of the video, the video gets scaled down as per the screen size.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }

   .title {
      border: 2px solid black;
      padding: 10px;
      background-color: blanchedalmond;
   }

   .grid-one {
      width: 60%;
      float: left;
      padding: 10px;
      border: 2px solid black;
      background-color: darkseagreen;
   }

   .grid-two {
      width: 40%;
      float: left;
      padding: 15px;
      border: 2px solid black;
      background-color: lightgreen;
   }

   ul {
      list-style-type: none;
   }

   li {
      background-color: aqua;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
   }

   video {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <div class="title">
   <h1>Responsive Web Design</h1>
   </div>

   <div class="grid-two">
   <ul>
      <li>Viewport</li>
      <li>Grid view</li>
      <li>Media queries</li>
      <li>Images</li>
      <li>Videos</li>
      <li>Frameworks</li>
   </ul>
   </div>

   <div class="grid-one">
   <h1>Responsive Videos</h1>
   <p>Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
   <p>Resize the browser window to see how the content gets responsive to the resizing.</p>
   </div>
</body>
</html>
Advertisements