Jak dostosować multimedialne elementy do różnych urządzeń

Jak dostosować multimedialne elementy do różnych urządzeń

Użytkownicy odwiedzają Twoją stronę na różnych urządzeniach – od dużych monitorów po małe ekrany smartfonów. Dlatego multimedia – wideo, audio i osadzone treści w iframe – muszą być responsywne, czyli automatycznie dopasowywać się do dostępnej przestrzeni.

Bez odpowiedniego formatowania filmy mogą wystawać poza ekran, a mapa lub odtwarzacz mogą być zbyt małe do użycia. W tej lekcji pokażę Ci, jak krok po kroku sprawić, by multimedia wyglądały dobrze wszędzie.

1. Responsywne wideo – krok po kroku

Domyślnie element <video> ma określoną szerokość i wysokość w pikselach. Możemy to zmienić za pomocą CSS, by automatycznie dopasowywał się do szerokości kontenera:

<style>
video {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>

<video controls src="film.mp4"></video>

Efekt działania: odtwarzacz będzie się skalował do szerokości rodzica, np. div-a lub całego okna przeglądarki.

2. Responsywne iframe – np. YouTube lub mapy

Iframe nie skaluje się automatycznie – musimy mu w tym pomóc. Najlepszym podejściem jest użycie tzw. kontenera z proporcjami:

<style>
.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%; /* proporcja 16:9 */
  height: 0;
  overflow: hidden;
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="responsive-iframe">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

Efekt działania: iframe będzie skalował się proporcjonalnie do szerokości – idealne rozwiązanie dla osadzonych filmów i map.

3. Stylowanie audio – dopasowanie do wyglądu strony

Element <audio> również możemy dopasować do szerokości rodzica. Warto nadać mu szerokość 100% i ograniczyć maksymalną szerokość, by nie wyglądał źle na dużych ekranach:

<style>
audio {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 20px auto;
}
</style>

<audio controls src="muzyka.mp3"></audio>

Efekt działania: odtwarzacz audio będzie elastyczny i estetycznie wyśrodkowany.

4. Media Queries – dodatkowa kontrola

Jeśli chcesz, możesz jeszcze bardziej dopasować multimedia do konkretnych rozmiarów ekranów. Przykład: na bardzo małych ekranach możesz ustawić inne proporcje iframe lub ukryć wybrane elementy.

<style>
@media (max-width: 480px) {
  .responsive-iframe {
    padding-bottom: 75%; /* bardziej pionowa proporcja */
  }
}
</style>

Dzięki temu zachowujesz pełną kontrolę nad układem multimediów na różnych urządzeniach.

Ćwiczenie – zbuduj responsywną sekcję multimedialną

Stwórz sekcję, która zawiera:

• responsywne wideo lokalne (np. <video>),
• iframe z YouTube w kontenerze,
• odtwarzacz audio dopasowany do szerokości strony.

👉 Otwórz JSFiddle i przetestuj układ

<style>
video, audio {
  max-width: 100%;
  display: block;
  margin-bottom: 20px;
}
.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<video controls src="https://www.w3schools.com/html/mov_bbb.mp4"></video>

<div class="responsive-iframe">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

<audio controls src="https://www.w3schools.com/html/horse.mp3"></audio>

Spróbuj przetestować efekt na różnych rozmiarach okna lub urządzeniach. Zobacz, jak elementy dopasowują się automatycznie!