Bootstrap responsive video filter

OBSOLETE. Please use: https://www.drupal.org/project/responsivewrappers

Bootstrap responsive video filter module adds a new filter in your input formats that checks the content and adds the video wrapper for responsive videos with 16/9 ratio aspect.

The filter searches for youtube or vimeo iframes:

<iframe src=".*(youtube|vimeo).*" ></iframe>

And appends the wrapper in the output:

<div class="embed-responsive embed-responsive-16by9">
  <iframe src=".*(youtube|vimeo).*" ></iframe>
</div>

This is useful beacuse you can use a WYSIWYG to add videos and magically append the responsive embed wrappers.

Installation and configuration

• Enable the module as usual: admin/modules
• Go to your input formats: admin/settings/filters
• Click the configure link in your input format
• Add the responsive video wrapper filter in your input format

If you are using a Bootstrap theme this works directly, if not you can add this styles to your project:

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}