devstory

Le Tutoriel de Bootstrap Embed Utility

  1. Bootstrap Embed
  2. Custom .embed-responsive-*by*

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

Tutoriels de programmation Bootstrap

Show More

Articles les plus récents

Show More