CloseTag | الشروحات | Bootstrap | الادوات المساعدة في BootStrap | Bootstrap Utilities

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
      </head>
      <body>

        <!-- Aspect ratio 1:1 -->
        <div class="ratio ratio-1x1 mx-auto mt-3 w-50">
          <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>

        <!-- Aspect ratio 4:3 -->
        <div class="ratio ratio-4x3 mx-auto mt-3 w-50">
          <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>

        <!-- Aspect ratio 16:9 -->
        <div class="ratio ratio-16x9 mx-auto mt-3 w-50">
          <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>

        <!-- Aspect ratio 21:9 -->
        <div class="ratio ratio-21x9 mx-auto mt-3 w-50">
          <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>


      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
      </body>
    </html>

PCFkb2N0eXBlIGh0bWw+DQogICAgPGh0bWwgbGFuZz0iZW4iPg0KICAgICAgPGhlYWQ+DQogICAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIj4NCiAgICAgICAgPHRpdGxlPkJvb3RzdHJhcCBkZW1vPC90aXRsZT4NCiAgICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KICAgICAgPGJvZHk+DQoNCiAgICAgICAgPCEtLSBBc3BlY3QgcmF0aW8gMToxIC0tPg0KICAgICAgICA8ZGl2IGNsYXNzPSJyYXRpbyByYXRpby0xeDEgbXgtYXV0byBtdC0zIHctNTAiPg0KICAgICAgICAgIDxpZnJhbWUgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLmNvbS9lbWJlZC90Z2JOeW1aN3ZxWSI+PC9pZnJhbWU+DQogICAgICAgIDwvZGl2Pg0KDQogICAgICAgIDwhLS0gQXNwZWN0IHJhdGlvIDQ6MyAtLT4NCiAgICAgICAgPGRpdiBjbGFzcz0icmF0aW8gcmF0aW8tNHgzIG14LWF1dG8gbXQtMyB3LTUwIj4NCiAgICAgICAgICA8aWZyYW1lIHNyYz0iaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvdGdiTnltWjd2cVkiPjwvaWZyYW1lPg0KICAgICAgICA8L2Rpdj4NCg0KICAgICAgICA8IS0tIEFzcGVjdCByYXRpbyAxNjo5IC0tPg0KICAgICAgICA8ZGl2IGNsYXNzPSJyYXRpbyByYXRpby0xNng5IG14LWF1dG8gbXQtMyB3LTUwIj4NCiAgICAgICAgICA8aWZyYW1lIHNyYz0iaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvdGdiTnltWjd2cVkiPjwvaWZyYW1lPg0KICAgICAgICA8L2Rpdj4NCg0KICAgICAgICA8IS0tIEFzcGVjdCByYXRpbyAyMTo5IC0tPg0KICAgICAgICA8ZGl2IGNsYXNzPSJyYXRpbyByYXRpby0yMXg5IG14LWF1dG8gbXQtMyB3LTUwIj4NCiAgICAgICAgICA8aWZyYW1lIHNyYz0iaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvdGdiTnltWjd2cVkiPjwvaWZyYW1lPg0KICAgICAgICA8L2Rpdj4NCg0KDQogICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtQTNySkQ4NTZLb3dTYjdkd2xaZFlFa08zOUdhZ2k3dklzRjBqclJBb1FtREtLdFFCSFV1TFo5QXNTdjRqRDRYYSIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AcG9wcGVyanMvY29yZUAyLjExLjUvZGlzdC91bWQvcG9wcGVyLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtWGUrOGNMOW9KYTZ0Ti92ZUNoU1A3cSttblNQYWo1QmN1OW1QWDVGNXhJR0UwRFZpdHRhcVQ1bG9yZjBFSTdWayIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1PRG1ESVZ6TitwRmRleHhIRUhGQlFIMy85L3ZROXVvcmk0NXo0SmpuRnNSeWRibVFibUw1dDF0UTBjdWxVenlLIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgIDwvYm9keT4NCiAgICA8L2h0bWw+