rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-09 02:46:15 +01:00
Code Issues Actions Packages Releases Activity
90ad4ffc82
Bootstrap/site/content/docs/4.5/utilities/embed.md
XhmikosR b46f05a948 Switch to Hugo 
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like:

* removing empty lines in raw HTML that break output
* read .browserslistrc, CSS variables from disk instead of duplicating it
* using Hugo mounts
* using Hugo for the docs CSS/JS
* move ToC Sass code to a separate file while adapting it for Hugo

Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-19 11:22:22 +02:00

1.9 KiB
Raw Blame History

layout title description group toc
docs Embeds Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device. utilities true

About

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

Example

Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn't strictly required, but we encourage it.

{{< example >}}

{{< /example >}}

Aspect ratios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

<!-- 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>

Within _variables.scss, you can change the aspect ratios you want to use. Here's an example of the $embed-responsive-aspect-ratios list:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;