Eric Bailey
by Eric Bailey
~1 min read

Categories

Tags

This post tests YouTube video embeds.

Simply use the responsive-embed helper include like so:

{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}

Or wrap embeds with a <div> element and the appropriate classes:

<!-- 21:9 aspect ratio -->
<div class="responsive-embed responsive-embed-21by9">
  <iframe class="responsive-embed-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="responsive-embed responsive-embed-16by9">
  <iframe class="responsive-embed-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="responsive-embed responsive-embed-4by3">
  <iframe class="responsive-embed-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="responsive-embed responsive-embed-1by1">
  <iframe class="responsive-embed-item" src="..."></iframe>
</div>