HTML Media Elements Demo

📝 Basic Media Elements

💡 Dasar-dasar Media HTML

HTML menyediakan elemen khusus untuk menampilkan berbagai jenis media seperti gambar, audio, dan video.

media.html

          
            <!-- Gambar dasar -->

            <img src="image.jpg" alt="Deskripsi gambar" width="400">

            <!-- Gambar responsif -->

            <picture>

              <source media="(min-width: 800px)" srcset="large.jpg">

              <source media="(min-width: 400px)" srcset="medium.jpg">

              <img src="small.jpg" alt="Gambar responsif">

            </picture>

            <!-- Audio dasar -->

            <audio controls>

              <source src="audio.mp3" type="audio/mpeg">

              Browser Anda tidak mendukung elemen audio.

            </audio>

🔍 Penjelasan Detail:

• <img> - Menampilkan gambar dengan atribut wajib src dan alt
• <picture> - Menyediakan gambar responsif untuk berbagai ukuran layar
• <audio> - Memutar file audio dengan kontrol pemutaran
• controls - Menampilkan kontrol pemutaran default
• <source> - Menentukan sumber media alternatif
• srcset - Menyediakan berbagai versi gambar untuk perangkat berbeda
• Selalu sertakan alt text untuk aksesibilitas

⚡ Pro Tips

Gunakan atribut loading="lazy" pada gambar untuk optimasi performa (lazy loading)!

🔗 Video & Embedded Content

💡 Video dan Konten External

HTML5 menyediakan elemen native untuk video dan embed konten dari platform lain.

video.html

          
            <!-- Video HTML5 -->

            <video width="640" height="360" controls poster="preview.jpg">

              <source src="video.mp4" type="video/mp4">

              <source src="video.webm" type="video/webm">

              Browser Anda tidak mendukung elemen video.

            </video>

            <!-- YouTube Embed -->

            <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

            <!-- Google Maps Embed -->

            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d..." width="600" height="450" style="border:0;" allowfullscreen></iframe>

🔍 Penjelasan Detail:

• <video> - Menampilkan video dengan berbagai format
• poster - Gambar preview sebelum video diputar
• autoplay - Memulai pemutaran otomatis (hati-hati penggunaannya)
• loop - Video akan berulang setelah selesai
• <iframe> - Menyematkan konten eksternal
• YouTube dan Maps menyediakan kode embed yang bisa langsung digunakan
• Atribut allowfullscreen memungkinkan mode layar penuh

⚡ Pro Tips

Untuk video background, gunakan autoplay muted loop dan CSS position: fixed untuk efek yang menarik!

🎨 Media Styling & Optimization

💡 CSS untuk Media Elements

Gunakan CSS untuk membuat elemen media lebih responsif dan menarik.

style.css

          
            /* Gambar responsif */

            img {

              max-width: 100%;

              height: auto;

              border-radius: 8px;

            }

            /* Video container responsif */

            .video-container {

              position: relative;

              padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

              height: 0;

              overflow: hidden;

            }

            .video-container iframe {

              position: absolute;

              top: 0;

              left: 0;

              width: 100%;

              height: 100%;

            }

            /* Efek hover gambar */

            img:hover {

              transform: scale(1.02);

              transition: transform 0.3s ease;

              box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);

            }

🔍 Penjelasan Detail:

• max-width: 100% - Membuat gambar scalable dengan container
• height: auto - Mempertahankan aspect ratio gambar
• Padding-bottom trick - Teknik untuk mempertahankan aspect ratio video
• object-fit: cover - Berguna untuk gambar yang perlu mengisi container
• Efek hover - Memberikan feedback visual saat interaksi
• border-radius - Membuat sudut elemen media melengkung
• Gunakan @media queries untuk penyesuaian di berbagai ukuran layar

⚡ Pro Tips

Gunakan format gambar modern seperti WebP untuk kompresi yang lebih baik, dan sertakan fallback PNG/JPG!