Video Embed - Pro Component

You can create responsive video embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.


Rules are directly applied to <iframe>, <embed>, <video>, and <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.


Wrap any embed like an <iframe in a parent element with .embed-responsive and an aspect ratio.

<div class="container">
    <div class="row">
        <div class="col-md-8 ml-auto mr-auto">
            <div class="iframe-container">
                <iframe class="embed-responsive-item" height="300" width="500" src="" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

If you want to see more examples and properties please check the official Bootstrap Documentation.