Time for action—making our video responsive

Now, we will add the CSS, which will make our video resize responsively. Perform the following steps for doing so:

1. 1. Again, we will open our page in HTML view. Around the <iframe> element, we will add a containing <div> as follows:

   <div class="video-container">
   <iframe width="640" height="480" src="http://www.youtube.com/embed/k3-EFN2Eohc" frameborder="0" allowfullscreen>
   </iframe>
   </div>
   

2. 2. We will click on Update to save our changes.

3. 3. Next, we will open the stylesheet, and add styling to that <div> and <iframe> to make the video responsive. The following CSS goes in the main body of the stylesheet, not in any of our media queries, as it will apply to all screen widths. On the Carborelli's site, there is a section for media styling so I'm going to add it there:

   /*responsive video*/
   .video-container {
   position: relative;
   padding-bottom: 75%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
   }
   .video...