Responsive Embed

An embedded <iframe> (a YouTube video, a Vimeo player, a map) normally keeps its fixed pixel width and height no matter how narrow its container gets, either overflowing the page or leaving awkward blank space. The Responsive Embed component wraps the embed in an aspect-ratio-locked container so it scales fluidly with its parent instead.

Added in Bootstrap 3.4. Responsive Embed is a relatively late addition to the Bootstrap 3 line, introduced in v3.4 (the same 3.4.1 release this site itself runs on). If you're working against an older 3.x build, this component simply won't be present yet.

1. Basic Usage: .embed-responsive + aspect-ratio modifier

Wrap the embedded element in a .embed-responsive container plus one aspect-ratio modifier class, then tag the <iframe>/<video>/<embed> itself with .embed-responsive-item. Drop the width/height attributes — the container controls sizing now. 

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

2. Aspect Ratio Variants

Two ratio modifiers ship out of the box: .embed-responsive-16by9 for widescreen video, and .embed-responsive-4by3 for the older, boxier standard-definition ratio. 

<div class="embed-responsive embed-responsive-16by9">...</div>
<div class="embed-responsive embed-responsive-4by3">...</div>

3. Worked Example: TrailMap Trail Video Guide

Some TrailMap trail pages include a short video walkthrough recorded by the trail's original submitter. It's embedded at a 16:9 ratio so it fills the content column width on desktop and shrinks cleanly on a phone, without ever needing a fixed pixel size. 

<!-- TrailMap: trail video guide -->
<h4>Video Guide: Sunset Ridge Trail</h4>
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/trailmap-sunset-ridge-guide" allowfullscreen></iframe>
</div>
Next up: that video guide sits above tabbed sections for Overview, Reviews, and Photos on the same trail page — head to Navs: Tabs & Pills to build the tab switcher itself.