How To Make Your Website Images and Videos Responsive

In order to make your website mobile-friendly, you will need to adapt your HTML code. Editors assign a fixed size to images, which may be too large for viewing on a smartphone. You can use CSS to make the image size responsive to the (smartphone) viewing screen.

Most HTML editors assign a fixed width to images, like this:

<img src="http://www.foothillwebdesign.com/images/pic.jpg" width="800" height="600" alt="a picture" />

To make the image size responsive, add the following CSS style code:

<img src="http://www.foothillwebdesign.com/images/pic.jpg" style="width:100%; height:auto;" width="800" height="600" alt="a picture" />

This insures that picture won’t be larger than the screen.

One small problem remains: if the image is smaller than the screen, it will be enlarged and become blurry. So use the max-width CSS property to set the maximum width of the image to the original image size.

<img src="http://www.foothillwebdesign.com/images/pic.jpg" style="width:100%; max-width:800px; height:auto;" width="800" height="600" alt="a picture" />

Embedding YouTube Videos

YouTube videos can be embedded in your website. To make them responsive (mobile-friendly), create a CSS class to be used as a <div> wrapper for the embed code:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Then just place the YouTube embed code inside a wrapper:

<div class="videoWrapper" style="max-width:560px;">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/D03wRb4s7MU" frameborder="0" allowfullscreen></iframe>
</div>