Osadzenie wideo, audio i zdjęć

Osadzenie wideo, audio i zdjęć

Multimedia to jeden z kluczowych elementów nowoczesnych stron internetowych.
Zdjęcia, wideo i dźwięki zwiększają zaangażowanie użytkownika, poprawiają odbiór treści i pozwalają lepiej zaprezentować produkt, usługę lub siebie.

W tej lekcji nauczysz się, jak:

• dodawać obrazy w HTML i nadawać im responsywność,
• osadzać wideo z pliku lokalnego lub linku,
• dodawać nagrania audio (np. podcasty, intro),
• kontrolować wygląd i zachowanie tych elementów.

📸 Dodawanie zdjęcia w HTML

Aby dodać obrazek, użyj tagu <img> z atrybutem src (ścieżka do pliku) i alt (opis alternatywny):

<img src="images/profil.jpg" alt="Zdjęcie profilowe" width="300">

Najlepsze praktyki:

• zawsze dodawaj alt – to ważne dla dostępności,
• używaj width/height lub styluj w CSS,
• stosuj klasy takie jak responsive-img i kontroluj rozmiar za pomocą media queries.

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

🎥 Osadzanie wideo z pliku lokalnego

Do osadzenia własnego filmu użyj tagu <video> z kontrolkami i ścieżką do pliku:

<video controls width="640">
  <source src="media/prezentacja.mp4" type="video/mp4">
  Twój system nie obsługuje wideo.
</video>

Najczęstsze atrybuty:

• controls – pokazuje przyciski (play, pauza itd.),
• autoplay – uruchamia film automatycznie (uwaga: często blokowane),
• muted – dźwięk wyciszony przy starcie (wymagany przy autoplay),
• loop – film odtwarza się w pętli.

🎵 Osadzanie dźwięku (audio)

Do odtwarzania dźwięku (np. podcastu, efektu dźwiękowego) użyj tagu <audio>:

<audio controls>
  <source src="media/nagranie.mp3" type="audio/mp3">
  Twoja przeglądarka nie obsługuje odtwarzania dźwięku.
</audio>

Działa bardzo podobnie jak <video> – możesz dodać loop, autoplay, muted itd.

🌐 Wideo z YouTube

Jeśli chcesz osadzić film z YouTube – nie używaj <video>. Zamiast tego skopiuj kod iframe z opcji „Udostępnij > Umieść”:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/abc123xyz" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Dostosuj width i height lub opakuj iframe w kontener i zrób go responsywnym przy pomocy CSS.

💡 Wskazówki praktyczne

• Używaj obrazów o rozsądnej wielkości – nie przesadzaj z wagą plików,
• Multimedia trzymaj w folderze /media lub /images – ułatwia organizację,
• Testuj, czy pliki poprawnie się ładują z serwera – używaj ścieżek względnych,
• Do testów lokalnych upewnij się, że pliki multimedialne są w tym samym katalogu co projekt lub odpowiednio zlinkowane.

Podsumowanie

• Używaj <img> z alt i stylami responsywnymi do obrazów,
• <video> i <audio> pozwalają łatwo osadzać własne pliki multimedialne,
• Dla zewnętrznych źródeł (np. YouTube) użyj <iframe>,
• Pamiętaj o dostępności, wydajności i mobilności treści.

W kolejnej lekcji stworzysz formularz kontaktowy – tak, aby użytkownicy mogli się z Tobą skontaktować bezpośrednio przez stronę.