Le Tutoriel de Bootstrap Embed Utility

View more Tutorials:

1- Bootstrap Embed

Parfois, vous devez intégrer un contenu multimédia (media) dans une page HTML, telle que la Video, PDF, etc. Il ne convient sans doute pas pour tous les types d'appareils ayant des largeurs d'écran différentes. Par conséquent, le Bootstrap fournit des classes utilisables pour résoudre ce problème.

<object> / PDF ...

Ceci est un exemple simple qui utilise  <object> pour intégrer un fichier  PDF à la page  HTML, mais la fenêtre qui affiche le  PDF không ne correspond pas au port de vue (viewport) de navigateur.
object-pdf-non-responsive-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>HTML object PDF</title>
   </head>
   <body>
      <h3 class="mb-3">Non-Responsive object PDF</h3>

      <object data="example.pdf" type="application/pdf" internalinstanceid="9" title="">
         <p>
            Your browser isn't supporting embedded pdf files.
            You can download the file
            <a href="example.pdf">here</a>.
         </p>
      </object>

   </body>
</html>

<iframe> / video ...

Et un autre exemple simple utilise  <iframe> pour afficher une  Video sur la page  HTML. De la même manière de l'exemple avec  PDF au-dessus, la  video affichée n'est pas compatible avec tous des appareils.
iframe-non-responsive-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>HTML iframe</title>
   </head>
   <body>
      <h3 class="mb-3">Non-Responsive iframe</h3>

      <iframe
         src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
      </iframe>
      
   </body>
</html>
Et voici la solution de  Bootstrap :
  1. Enballez (wrap) <iframe>/<object>/.. par <div class="embed-responsive embed-responsive-*by*">. Dont : (*) est un numéro, je vous donnerai des explications plus détaillées ci-dessous.
  2. Appliquez la classe .embed-responsive-item au <iframe>/<object>/...
<!-- object/ PDF ... -->
<div class="embed-responsive embed-responsive-16by9">
   <object class="embed-responsive-item" data="example.pdf"
      type="application/pdf" internalinstanceid="9" title="">
      <p>
         Your browser isn't supporting embedded pdf files. You can download the file
         <a href="example.pdf">here</a>
      </p>
   </object>
</div>

<!-- iframe/ Video ... -->
<div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item"
      src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
   </iframe>
</div>


 
Et le résultat actuel n'est pas trop mal!
iframe-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Embed</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h3 class="mb-3">Responsive iframe</h3>

      <div class="embed-responsive embed-responsive-16by9">
         <iframe class="embed-responsive-item"
            src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
         </iframe>
      </div>
      
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

.embed-responsive-*by*

Certaines classes sont installées dans  Bootstrap pour installer la proportion de la largeur et la longeur de  media.
  • embed-responsive-21by9
  • embed-responsive-16by9
  • embed-responsive-4by3
  • embed-responsive-1by1
.embed-responsive-*by*
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
   <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
   <iframe class="embed-responsive-item" src="..."></iframe>
</div>

2- Custom .embed-responsive-*by*

Vous pouvez créer une classe  .embed-responsive-*by* personnalisée, par exemple  .embed-responsive-5by4.
.embed-responsive-5by4
.embed-responsive-5by4 {
  padding-bottom: 80.0%;
}
Le formula général :
210:297 est la proportion entre la largeur et le poids d'un papier  A4. Et vous pouvez définir la classe  .embed-responsive-210by297 comme des instructions ci-dessous :
.embed-responsive-210by297
.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}
object-pdf-responsive-example
<style>
   .embed-responsive-210by297 {
   padding-bottom: 141.42%;
   }
</style>

<div class="embed-responsive embed-responsive-210by297">
<object class="embed-responsive-item" data="example.pdf"
   type="application/pdf" internalinstanceid="9" title="">
   <p>
      Your browser isn't supporting embedded pdf files. You can download the file
      <a href="example.pdf">here</a>.
   </p>
</object>
</div

View more Tutorials: