Dynamic Responsive elements like images,videos,maps,circle content.
you can make a respnsive video by simply create an element with class responsive-video
and then put inside of it the embeded video element with class video.
and for the html5 video just add the class
html5-video to the video element see the exapmle below.
<div class="responsive-video">
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/RrutzRWXkKs" frameborder="0" allowfullscreen></iframe>
</div>
<video class="html5-video" controls>
<source src="images/video.mp4" type="video/mp4">
</video>
you can make a respnsive map by simply create an element with class responsive-map and then put inside of it the embeded map element with class map.
<div class="responsive-map">
<iframe class="map" width="600" height="450" src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA" allowfullscreen></iframe>
</div>
you can make a respnsive circle by simply create an element with class responsive-circle and then put inside of it a content element with class circle-content the content can be any thing.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<!-- Main Syntax -->
<div class="responsive-circle">
<div class="circle-content">
... your content ...
</div>
</div>
<!-- Text Content -->
<div class="responsive-circle">
<div class="circle-content primary-bg">
<div class="wrap"> <!-- wrap to center the content -->
<h5>Circle Content Demo</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
</div>
</div>
</div>
the images ar responsive by default but if wanna make a fluid image add a class fluid to the image element. and if wanna make a filled image (100% width and height) add the class fill-img.