<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 ----------> <div class="video-container"> <div class="responsive-video"> <iframe src="https://www.youtube.com/embed/6v2L2UGZJAM?rel=0&showinfo=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> <div class="video-container"> <div class="responsive-video"> <iframe src="https://www.youtube.com/embed/aBnGzklDHnM?rel=0&showinfo=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div>

body { background-color: #C4ECD1; margin: 0 auto; width: 70%; padding-top: 80px; } .video-container { width: 40%; padding: 10px; background: white; display: inline-block; } .responsive-video { position: relative; display: block; width: 100%; height: 0; padding-bottom: 56.25%; } .responsive-video iframe, .responsive-video video { position: absolute; width: 100%; height: 100%; }