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.

About

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.

Example

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="https://www.youtube.com/embed/IN6QnLpVEPI" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

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