Die Anleitung zu Bootstrap Embed Utility

View more Tutorials:

1- Bootstrap Embed

Manchmal brauchen Sie eine Medien Inhalt in der Seite  HTML einbetten, z.B  Video, PDF,... Sie kann allen Geräten mit der unterschiedlichen Breite nicht entsprechen. Deshalb gibt  Boots trap die Utility Klasse um dieses Problem zu lösen.

<object> / PDF ...

Das ist ein einfaches Beispiel, in dem wir  <object> verwenden um eine File  PDF in die Seite  HTML einzubetten, aber das PDF Anzeigen Fenster entspricht das Viewport des Browser nicht.
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 ...

Und ein anderes einfaches Beispiel für die Verwendung vom  <iframe> um ein  Video auf die Seite  HTML anzuzeigen. Auch wie das Beispiel über  PDF oben ist das angezeigte  Vide nicht kompatibel mit den unterschiedlichen Geräten
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>
Und das ist die Maßnahme vom  Bootstrap:
  1. <iframe>/<object>/.. durch <div class="embed-responsive embed-responsive-*by*"> einwickelt (wrap). Darin: (*) ist eine Zahl. Ich werde es in Detailiert wie folgend erklären.
  2. Die Klasse .embed-responsive-item für <iframe>/<object>/... anwenden
<!-- 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>


 
Und das Ergebnis ist eigentich nicht zu schlecht.
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*

Es gibt einige vom  Bootstrap eingebauten Klasse um das Verhältnis zwischen die Breite und die Höhe vom  media ​​​​​​​einzustellen.
  • 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*

Sie können eine anpassende Klasse  .embed-responsive-*by* machen, z.B  .embed-responsive-5by4.
.embed-responsive-5by4
.embed-responsive-5by4 {
  padding-bottom: 80.0%;
}
Die allgemeine Formel:
210:297 ist das Verhaltnis zwischen die Breite und die Höhe von einem  A4 Papier. Und Sie können die Klasse  .embed-responsive-210by297 wie folgend definieren:
.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: