Jak tworzyć: Responsywne Iframe

Naucz się, jak używać CSS do tworzenia responsywnych iframe.

Responsywne iframe

Utwórz iframe utrzymujący proporcję szerokości i wysokości (4:3, 16:9 itp.):

Co to jest proporcja szerokości i wysokości?

Proporcja szerokości i wysokości elementu opisuje stosunek jego szerokości do wysokości. Dwie powszechne proporcje video to 4:3 (standardowy format video w XX wieku) i 16:9 (format HD telewizji oraz cyfrowej telewizji europejskiej oraz domyślna proporcja dla filmów YouTube).

Jak To - Responsywne Iframes

Krok 1 - Dodaj HTML:

Użyj elementu kontenera, na przykład <div>, i dodaj iframe:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Krok 2 - Dodaj CSS:

dla padding-top Dodaj wartości procentowe, aby utrzymać proporcję szerokości i wysokości kontenera DIV. Poniższy przykład utworzy kontener o proporcji szerokości i wysokości 16:9, co jest domyślną proporcją dla filmów YouTube.

Przykład - proporcja szerokości i wysokości 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* proporcja szerokości i wysokości 16:9 (9 dzielone przez 16 równa się 0.5625) */
{}
/* Następnie ustaw styl iframe, aby pasował do pełnej wysokości i szerokości kontenera div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Spróbuj sam

Inne proporcje szerokości i wysokości

Przykład - proporcja szerokości i wysokości 4:3

.container {
  padding-top: 75%; /* proporcja szerokości i wysokości 4:3 */
{}

Spróbuj sam

Przykład - proporcja szerokości i wysokości 3:2

.container {
  padding-top: 66.66%; /* proporcja szerokości i wysokości 3:2 */
{}

Spróbuj sam

Przykład - proporcja szerokości i wysokości 8:5

.container {
  padding-top: 62.5%; /* proporcja szerokości i wysokości 8:5 */
{}

Spróbuj sam

Przykład - 1:1 proporcja szerokości i wysokości (szerokość i wysokość zawsze są równe)

.container {
  padding-top: 100%; /* proporcje 1:1 */
{}

Spróbuj sam