Media

Responsive and Circular Images

To make images resize responsively to the width, you can add the class responsive-img to your image tag. To make images appear circular, simply add class circle.

	<img class="responsive-img" src="imgs/sun-glasses_01.jpg">
	
	<img class="responsive-img circle" src="imgs/sun-glasses_01.jpg">
        

Responsive Videos

You can embed responsive video by using iframe element wraped in div with class video-container or use HTML5 video tag and add the class responsive-video.

	<!-- Material design video -->
	<div class="video-container">
		<iframe width="853" height="480" src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
	</div>
	
	<!-- Clouds video-->
	<video class="responsive-video" controls>
		<vsource src="videos/clouds2.mp4" type="video/mp4">
		<vsource src="videos/clouds2.ogv" type="video/ogv">
		<vsource src="videos/clouds2.webm" type="video/webm">
	</video>
        

For more detailed informations please visit: http://materializecss.com/media-css.html