Responsive Video in Bootstrap 3 – Video Embed – How to

How to Add responsive bootstrap 3 Iframes and responsive video embed. Make videos responsive using Bootstrap and fix your iframe problem.

Usually we are conscious about our video embed in our website will they appear exactly fit on mobile devices. Bootstrap 3 has responsive video embed classes with aspect ratio of 16:9 and 4:3. Developers try to set the width of iframes with 100% but there are responsive CSS classes of Bootstrap. Learn how to make Responsive Video in Bootstrap 3.

16:9 Responsive Aspect Ratio

<!-- Responsive Video Embed in Bootstrap 3 -->
 <div class="embed-responsive embed-responsive-16by9">
 <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
 </div>

4:3 Responsive Aspect Ratio

<!-- Responsive Video Embed in Bootstrap 3 -->
 <div class="embed-responsive embed-responsive-4by3">
 <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
 </div>

How Responsive Video In Bootstrap

Bootstrap Responsive iFrame Embed Twoclock

Bootstrap Responsive iFrame Embed

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! No need to add  frameborder="0" in your <iframe>s as bootstrap override it.

One thought on “Responsive Video in Bootstrap 3 – Video Embed – How to

Leave a Reply

Your email address will not be published. Required fields are marked *