Responsive Embeds

‹ Back

Youtube Video

All you need to do is wrap a div around the youtube embed to make it responsive:

<div class="embed__youtube">
  <iframe src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>

Vimeo Video

Vimeo videos have a slightly different aspect ratio so you can use a custom vimeo class for those:

<div class="embed__vimeo">
  <iframe src="//player.vimeo.com/video/1084537" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Issuu

Issuu embeds are responsive too, no extra divs needed:

<div data-configid="0/10351939" style="width: 525px; height: 340px;" class="issuuembed"></div>
<script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>