Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
Like Article
  • Last Updated : 28 Nov, 2021

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>Responive 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!