Time for action – resizing videos

Perform the following steps to make your videos respond to the viewport size:

1. We'll get started as we usually do by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll create a few sections. In each section, we'll include a place to put a video, a title, and a short description, as shown in the following code:

   <div class="content">
     <h1>Favorite Videos</h1>
     <section>
       <div class="video">
       </div>
       <div class="description">
         <h1>Maru Being Maru</h1>
         <p>A video of Maru, the cutest cat in Japan, playing with a box.</p>
       </div>
     </section>
     <section>
       <div class="video">
       </div>
       <div class="description">
         <h1>Candy apple shaped soft candy</h1>
         <p>RRCherryPie demonstrates how to use a candy...