What are the classes to create responsive image & video in Materialize ?

In this article, we will see how to add responsive images and video to HTML files using Materialize CSS & will also see their implementation through the examples.

Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize CSS is a popular front-end framework that helps to add advanced features along with enabling the making of responsive websites just by importing the various classes from the Materialize CSS package. It also facilitates the addition of responsive images & videos to the website.

Responsiveness: Responsiveness is a feature where the text, images, videos, and other elements of the website resize themselves automatically according to the screen size when they are being viewed in different device widths. We will understand the addition of the responsive behavior to the images on our website, through the examples.

Adding Responsive Images to the website

We can add responsive images to our website using the class “responsive-img”. This class will make the image responsive. By default, it will have "width = 100% and height = auto".

Syntax:

<img class="responsive-img" src="url">

Example: This example illustrates the addition of a responsive image using the Materialize CSS properties.

Output:

Adding Responsive Videos to the website

We can add responsive videos to our website using the class “responsive-video” that will make the video responsive.

Syntax:

<video class="responsive-video" controls>
 <source src="..." type="....">
</video>

Here, we will be adding a YouTube video link, so we are using a <div> tag with a class "video-container". If you are adding a video already downloaded to your computer, you can use the <video> tag for this case.

<div class="video-container responsive-video">
 <iframe width="853" height="480" src=
"https://www.youtube.com/embed/gaNp9i6rQHc?rel=0" 
 frameborder="0" allowfullscreen>
 </iframe>
</div>

Example: This example illustrates the addition of responsive video using the video-container class in Materialize CSS.

Output: