Skip to content


Subversion checkout URL

You can clone with
Download ZIP
a compass extension to help embed videos and iframes in responsive designs
tag: 0.0.4

Compass Responsive Embeds

This extension helps embedding videos and iframes in responsive designs.

It provides a responsive-embed mixin to apply on an element containing an embed, to scale it while keeping its ratio.

See the blogs posts from Anders M. Andersen and A List Apart for more information.


Add this line to your application's Gemfile:

gem 'compass-responsive-embeds'

And then execute:

$ bundle

Or install it yourself as:

$ gem install compass-responsive-embeds

Add to a project:

// rails: compass.config, other: config.rb
require 'compass-responsive-embeds'

// command line
compass install compass-responsive-embeds


In your html template:

<div class="embed-16-9">
  <iframe src="" frameborder="0" allowfullscreen></iframe>
<div class="embed-4-3">
  <script async class="speakerdeck-embed" data-id="4eb80921b029470054011d3f" data-ratio="1.3333333333333333" src="//"></script>

In your stylesheet:

@import 'compass-responsive-embeds';

// 16/9 embed
.embed-16-9 {
  @include responsive-embed(16/9);

// 4/3 embed
.embed-4-3 {
  @include responsive-embed(4/3);

// default 1 ratio for a square embed
@embed-1-1 {
  @include responsive-embed;

You can use any ratio, as long as the result can be converted to percentages.


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
Something went wrong with that request. Please try again.