Allow browsers to determine embedded media dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to
<object> elements; optionally use an explicit descendant class
.embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don’t need to include
frameborder="0" in your
<iframe>s as we override that for you.
<div class="embed-responsive embed-responsive-16x9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/MbGkL06EU90?rel=0" allowfullscreen></iframe> </div>
Aspect ratios can be customized with modifier classes.
Special Case: Video
As a quick alternative, using the class
.video-responsive uses the same settings as
.embed-responsive but sets a default aspect ratio of 16:9.