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-img
− It is used to make image responsive.
.video-container
− It is used to make embedded videos responsive.
.responsive-video
- It is used to make HTML5 videos responsive.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.
<img class="responsive-img" src="..." alt="responsive image">
<img class="responsive-img" src="../code-support/images/bootstrap/bird.jpg" alt="responsive image" width="250" height="250">
To make circular image assign the .circle
class to the <img>
element base class.
<img src="..." class="circle" alt="Circular Image">
<img src="../code-support/images/bootstrap/bird.jpg" class="circle" alt="Circular Image" height="300" width="300">
To create an embedded video responsively, add the embedded video inside the <video>
element and assign the .video-container
class.
<div class="video-container">
<iframe src=".." frameborder="0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="video-container">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
To create HTML 5 video responsive, add HTML 5 video inside the <video>
element and assign it .responsive-video
class.
<video class="responsive-video" controls>
<source src="../images/html5-video.mp4" type="video/mp4">
</video>
<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>