To make images resize responsively (based on the screen size) to page width, you can add the class responsive-img to your image tag.
<div class="row">
<div class="center-align">
<img src="../images/materialize.jpg" class="responsive-img" alt="Responsive Image">
</div>
</div>
To make images appear circular, add class="circle" this class image will be displayed in circular.
<div class="row">
<div class="center-align">
<img src="../images/materialize-circle.jpg" class="responsive-img circle" alt="Image Circle">
</div>
</div>To make your embeds responsive, To add video-container this class.
<div class="row">
<div class="video-container">
<iframe width="854" height="480" src="https://www.youtube.com/embed/cQzien5H2Do" frameborder="0" allowfullscreen></iframe>
</div>
</div>To make your HTML5 Videos responsive just add the class responsive-video to the video tag.
<div class="row center-align">
<video class="responsive-video" controls>
<source src="../images/html5-video.mp4" type="video/mp4">
</video>
</div>