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.
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>
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>
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.