<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="bs-example">
<div class="alert alert-info alert-dismissible fade show">
<strong>Note!</strong> Open the output in a new blank tab (click the arrow button next to "View fullscreen") and resize the browser window to see how responsive videos work.
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<h2 class="mt-4">Video with 21:9 aspect ratio</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/sKJxH3_Z5bg"></iframe>
</div>
<h2 class="mt-4">Video with 16:9 aspect ratio</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/sKJxH3_Z5bg"></iframe>
</div>
<h2 class="mt-4">Video with 4:3 aspect ratio</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/sKJxH3_Z5bg"></iframe>
</div>
<h2 class="mt-4">Video with 1:1 aspect ratio</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/sKJxH3_Z5bg"></iframe>
</div>
</div>
</body>
