Using Embedded Media Helper

Embed videos, iFrames, Objects and Embed elements responsively.

Using the following SASS and HTML you can easily add youtube videos, or any iframe, object or embed element and have it adapt to it's parent container.

First you will need to include the mixin in your stylesheet with:

.embed {
 @include ioe;
}

Then you just need something similar to the following HTML

<div class="embed">
 <iframe
 src="//www.youtube.com/embed/xQ_IQS3VKjA"
 frameborder="0"
 allowfullscreen>
 </iframe>
</div>

Easy as that.

Also works great for Google Maps, or any iFrame based content: