Skip to content

Responsive Design: adapt images and videos

27 mayo, 2021

As I mentioned in the article on the basic structure of Responsive Design, an adaptable design ceases to be so if when You view it from a mobile phone and you see that the images and videos stick out of the page, so I’m going to show you how to make the multimedia contents adapt to different types of screen (images and videos of HTML5, Youtube Y Vimeo).

The ways that I will discuss to adapt images and video are basic and probably on some occasions it is necessary to make a more specific design that we can do with @media queries, but the positive side of these methods is that they are adaptable to the width of the container, regardless of the screen width (so in certain sizes it may be useful to make a main container and a sidebar and the video that is in the container will suit it, for example).

Adapt images

To create highly optimized designs it may be important to use several different images, one with a larger size and another with a lighter one, but I am going to focus on the use of the same image (which should be optimized as far as possible) and it will adapt as we want, being able to make the images behave in the following ways:

  • Occupy the width of the page: it can be useful for headers or main images and we will do this by setting its width to 100%.
  • img {
        width:100%;
    }

  • Have an image with a maximum size: In this case, the image will have a size that will not exceed, but when the size of the container is reduced it will shrink adapting to the page and it can serve as an example to use it for a blog, where we may use a slightly larger image on occasion (for example an infographic) and we do not want to make it narrower or cut it.
  • img {
        width:100%;
        max-width:400px;
    }

  • Have the images in their original size: and in the latter case we may have a series of images of different sizes and we want to keep their original sizes but that adapts to the width of the container or the screen and, as in the previous case, it can be used for a blog with an adaptive design or with mobile version (since they vary the same in the desktop version and would adapt to the width in the mobile).
  • img {
        max-width:100%;
    }

    I’m going to give you as an example the web gallery of CSS-Tricks, which in large widths divides the images into three columns and if not one, but they always adapt to 100% of the width of their container.

    Adapt Videos

    When we want to adapt videos we have two types of videos to adapt, the first type is the videos of HTML5 (for those who do not know what this is about Genbeta Dev we have an article that tells how to use it and the compatibilities) and on the other hand the videos of external services that we must embed their code, which is normally a <iframe> (services like Youtube, Vimeo…)

    HTML5

    In this case there is no type of complication, it is as if we were using an element <img>, that is, we can apply everything that I have explained before to treat an element <video>, but I will put a couple of methods still.

  • Adapt the video to the total width of the page (remember that this can also be put into practice on mobile webs, so it would not be a problem if it became very large):
  • video {
        width:100%;
    }

  • Now we will make it have the maximum size that we want and when it does not take on the page it will be smaller:
  • img {
        width:100%;
        max-width:640px;
    }

    External services (Yotutube, Vimeo …)

    When using such tagged videos <iframe> it is much more complicated to be able to make these videos adapt, and to achieve this you have to do a whole ritual (hopefully HTML5 prevails quickly before this type of videos).

    In this case we have two options, the first is that the video adapts to the width of the container (it would not be too big if it used a “standard” width as it uses for example Genbeta Dev, 640 pixels which can be said to be normal) and on the other hand we can limit the width to a specific one.

    I am going to explain the things that we have to take into account so that it works well:

  • We have to resize the video container so that it preserves the ratio (or relationship between height and width), and here we have to implement a “trick“(Which could be branded as sloppy, but in the absence of something better it serves us and if someone knows another way with CSS do not hesitate to comment), and the method consists of putting the <iframe> inside a label <div> which will have a high of 0px and a width of 100% and the trick to make it the size of the video is to use your padding-top and set the percentage value of your image ratio, which is usually 16:9, I am going to put several relations:
  • #Dividiremos el alto entre el ancho, y el padding-top se adaptará según esta relación al ancho
    16:9    ---> 9/16*100    = 56,25%
    4:3 ---> 3/4*100     = 75%

  • What we have done above is only for the label <div> (if you are getting lost now you will see the CSS with the explanation of things), having this label that we know will be adapted to have the appropriate ratio we must make the <iframe> float above the previous label and adopt its height and width (setting its height and width to the 100% and your position as absolute).
  • Finally, if we want our video not to occupy 100% of the width of the page or container in which it is located (and also focus on the page) we must delimit it with another tag <div> that will have the maximum width that we want and an automatic margin that will make it center correctly.
  • The required code

    As I have commented before so that the video is centered and does not expand to 100% of the page without limit we must put it in a container (that its class will be called delimitador"), if you want to make it adapt 100% without limit, do not add it, but what it contains does.

    The code example I am going to do with two videos together, one on top of the other of Youtube Y Vimeo And as it would not help us much to add it here, you can try the three videos as examples, which unfortunately I have not found any website that adapts their videos in this way.

    <div class="delimitador">
        <div class="contenedor">
            <iframe src="https://www.youtube.com/embed/wMhL_QIyD1k?rel=0"></iframe>
        </div>
        <div class="contenedor">
            <iframe src="https://player.vimeo.com/video/52553020"></iframe>
        </div>
    </div>
    

    And the code CSS is the following:

    /* Podemos eliminar este estilo si no queremos que se adapte al ancho máximo */
    .delimitador{
        width:560px;    /* Ancho máximo */
        margin:auto;    /* Centramos el vídeo */
    }
    /* El contenedor con el padding-top crea el tamaño del vídeo */
    .contenedor{
        height:0px;
        width:100%;
        padding-top:56.25%; /* Relación: 16/9 = 56.25% */
        position:relative;
    }
    /* El iframe se adapta al tamaño del contenedor */
    .contenedor iframe{
        position:absolute;
        height:100%;
        width:100%;
        top:0px;
        left:0px;
    }

    Resume

    There are some things that are not so easy to do so that they adapt to all types of screen, but you can end up achieving it and I recommend you if you are going to put into practice any of these methods to make these multimedia elements are displayed well in all types screen is that you create the CSS necessary to do so and always leave it accessible so that it is easier for you to adapt everything.

    In Genbeta Dev | Introduction to Responsive Design