Fluid Media
Basecoat has classes to make all your medias flexible.
If you want to make all images, videos, and map embeds flexible use the body class of media-fluid. Images will automatically be fluid and as wide as their parent containers. Wrap any maps or videos in a container class of media-container and be sure to strip away any of the hard coded width and height attributes on your iframes or embeds.
<body class="media-fluid">
<img src="http://imagepath.com/image.png" alt="I am flexible now">
<div class="media-container">
<iframe src="https://www.youtube.com/embed/vq2jYFZVMDA?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</body>If you want to leave default widths on media don’t the body class above, instead target individual images by using the img-fluid in the <img> element.
<img src="https://octodex.github.com/images/welcometocat.png" class="img-fluid">Additionally you can wrap any videos or map embeds with a container element and apply the media-fluid class to it to target just those items:
<div class="media-fluid">
<div class="media-container">
<iframe src="https://www.youtube.com/embed/vq2jYFZVMDA?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>