![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Responsive Video or Slideshow Embeds in Bootstrap with Examples
Bootstrap is a free open source and is one of the most famous HTML, CSS, and Javascript frameworks. It's used for user interfaces and themes that create what a user sees in a website or application, and it's utilized on the client rather than the server.
Responsive web applications automatically adapt to various screen sizes. It is used to create responsive mobile-first web apps and websites; mobile-first refers to designing for smaller displays first and then scaling up to bigger ones. As a result, you won't have to worry about your app not working on different devices or with different screen sizes.
In Bootstrap we have a class named “embed-responsive” for creating embeds. Written rules are directly applied to elements of parent class i.e <iframe>, <embed>, <video>, and <object> elements.
Example
Program for Responsive video embeds
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title> Responsive Video Example </title> </head> <body> <h1 style="font-size:5vw;">Example of Responsive video embed</h1> <!--Using Class embed-responsive --> <div class="embed-responsive embed-responsive-21by9"> <embed class="embed-responsive-item" src="https://www.youtube.com/embed/NAEHbzXMNpA" allowfullscreen> </video> </div> </body> </html>
Output
Below is the result of the Above Code
To modify the Aspect ratio we have some modifier classes provided by Bootstrap.
<!-- Aspect ratio 1:1> <div class="embed-responsive embed-responsive-1by1"></div> <!-- Aspect ratio 4:3> <div class="embed-responsive embed-responsive-4by3"></div> <!-- Aspect ratio 16:3> <div class="embed-responsive embed-responsive-16by9"></div> <!-- Aspect ratio 21:9> <div class="embed-responsive embed-responsive-21by9"></div>
Conclusion
In this tutorial, we discussed the definition of Bootstrap and how it can be used in front-end Development for creating Responsive embeds to make applications compatible with different screen sizes. We also look at an example for creating Responsive embeds in Bootstrap where we discussed the Bootstrap class “embed-responsive”. We hope you find this tutorial helpful.