Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Materialize CSS</title>
     
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet"
          href=
     
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</head>
 
<body>
    <h4>Responsive Image in materialize</h4>
    <div style="border: 2px solid black; display: flex;">
        <img class="responsive-img"
             src=
         
<p>
            This is a sample image which has
            been given the class "responsive-img"
            to make it responsive in nature.
        </p>
 
    </div>
</body>
 
</html>


Output:

Responsive Image using Materialize CSS

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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Page Title</title>
   
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet"
          href=
 
    <!-- Compiled and minified JavaScript -->
    <script src=
      </script>
</head>
 
<body>
    <h4>Responsive Video in materialize</h4>
    <div class="video-container responsive-video">
        <iframe width="850"
                height="400"
                   src=
                frameborder="0"
                allowfullscreen>
      </iframe>
    </div>
</body>
 
</html>


Output:

Responsive Video using Materialize CSS



Last Updated : 13 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads