- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Embed
Description
The embed utility is used to insert a video in a page by using <iframe> element along with .embed-responsive class and an aspect ratio (for instance: embed-responsive-21by9).
Aspect Ratios
You can use the aspect ratios such as 21by9, 16by9, 4by3, 1by1to embed video in a page. The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Aspect Ratios</h2> <h4>21:9 aspect ratio</h4> <div class = "embed-responsive embed-responsive-21by9"> <iframe class = "embed-responsive-item" src = "https://www.youtube.com/embed/I_G0Yb6R7m0" allowfullscreen></iframe> </div> <br> <h4>16:9 aspect ratio</h4> <div class = "embed-responsive embed-responsive-16by9"> <iframe class = "embed-responsive-item" src = "https://www.youtube.com/embed/I_G0Yb6R7m0"></iframe> </div> <br> <h4>4:3 aspect ratio</h4> <div class = "embed-responsive embed-responsive-4by3"> <iframe class = "embed-responsive-item" src = "https://www.youtube.com/embed/I_G0Yb6R7m0"></iframe> </div> <br> <h4>1:1 aspect ratio</h4> <div class = "embed-responsive embed-responsive-1by1"> <iframe class = "embed-responsive-item" src = "https://www.youtube.com/embed/I_G0Yb6R7m0"></iframe> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
bootstrap4_utilities.htm
Advertisements