Articles → BOOTSTRAP → Responsive Embeds In Bootstrap

Responsive Embeds In Bootstrap

In this article, we will discuss responsive embeds in Bootstrap.

Purpose

In the web application, we embed videos, presentations using iFrame. We have an option in bootstrap to make this embedded element responsive i.e. adjust according to the screen size.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RR63tgLcczc"></iframe>
         </div>
      </div>
   </body>
</html>

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, September 9, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**