Media

Frame

Apply frame on a image with frame. Can also be used on other media like video containers.

<img class="frame" src="http://placehold.it/250x200" alt="">

Frame Circle

Makes a ricle shape on elements with same border style as .frame. To get a perfect circle the image needs to be square.

<div class="frame-circle">
  <img src="http://placehold.it/250x250" alt="">
</div>

Image

Images expands 100% of it's container if the container is smaller then the image original size.

<div style="width: 50%">
  <img src="http://placehold.it/500x300" alt="">
</div>

Video

FitVids is configured to responsivly scale embedded videos to it's continer width if the container have the class media-youtube-video.

By including ?color=white&theme=light&rel=0&amp;showinfo=0 after the embedded youtube id, it displays without title, does not show related videos after it's played and uses a light control panel. More settings can be found at YouTube dev pages

<div class="media-youtube-video">
  <iframe class="" width="560" height="315" src="//www.youtube.com/embed/t3GusBsDZM4?color=white&theme=light&rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>