Materialize CSS Media
Materialize CSS Media is used to deal with images and videos.It provides?.responsive-img?&?.responsive-video?classes that are used to make image and video responsive correspondingly.
Followings are the media classes:
Responsive Images
To make an image responsive, add the?.responsive-img?class to the?<img>?element base class. This class sets the image?max-width: 100%?and?height: auto?properties.
General Syntax
<img class="responsive-img" src="..." alt="responsive image">
Source Code
<img class="responsive-img" src="../code-support/images/bootstrap/bird.jpg" alt="responsive image" width="250" height="250">
Circular images
To make a circular image assign the?.circle?class to the?<img>?element base class.
General Syntax
<img src="..." class="circle" alt="Circular Image">
Source Code
<img src="../code-support/images/bootstrap/bird.jpg" class="circle" alt="Circular Image" height="300" width="300">
Responsive Embeds
To create an embedded video responsively, add the embedded video inside the?<video>?element and assign the?.video-container?class.
General Syntax
<div class="video-container">
<iframe src=".." frameborder="0" allowfullscreen></iframe>
</div>
Source Code
<div class="container">
<div class="row">
<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Responsive Videos
To create an HTML 5 video responsive, add HTML 5 video inside the?<video>?element and assign it?the .responsive-video?class.
General Syntax
<video class="responsive-video" controls>
<source src="../images/html5-video.mp4" type="video/mp4">
</video>
Source Code
<div class="container">
<div class="row center-align">
<video class="responsive-video" controls>
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
To read more click here...