Tutorial Membuat Embed Video Youtube Responsive dan Valid HTML 5 – Pasang Video Youtube Full Responsive di Blog. Kali ini saya akan membagikan tutorial bagaimana caranya membuat video youtube menjadi responsive dan valid HTML5 pastinya 🙂 Bagi kalian yang suka menggunakan video youtube di postingan blog pasti merasa resa kalau video yang kita gunakan belum responsive dan ketika kita ceck di validator[dot]w3[dot]org atau validator lain nya. Pasti hasil yang di dapatkan tidak sesuai keinginan 🙂 maka dari itu saya mau share trik ataupun tips untuk membuat embed video youtube menjadi lebih responsive dan pastinya valid HTML5 dong yah :hebat
Silahkan Simak Tutorial ini baik baik 😉
Tutorial
- Buka Youtube
- Cari Video yang ingin di tambahkan ke postingan blog.
- Kemudian Copy Kode Embed / HTML Video Youtube (bisa lihat Gambar di atas untuk tutorial Copy Kode Video youtube nya)
Contoh Video :
<iframe width="560" height="315" src="https://www.youtube.com/embed/v4Vj77hhsEE" frameborder="0" allowfullscreen></iframe>Terlihat kode video di atas masih menggunakan Kode HTML Embed Video yang belum di modifikasi.
- Setelah di copy dan kamu akan mendapatkan kode iframe seperti contoh di atas. Maka langkah Selanjutnya adalah Hapus kode width=”…..” , height=”….” , frameborder=”…”, dan allowfullscreen :ke Sehingga tampilan kode akan menjadi seperti ini.
<iframe src="https://www.youtube.com/embed/v4Vj77hhsEE"></iframe>- Langkah Selanjutnya kita akan membuat Embed video tersebut menjadi responsive.
- Silahkan tambahkan Kode Style berikut kedalam kode iframe / Embed video tadi.
style="min-height: 315px; width: 90%;"Saran saya: Gunakan Style ini agar Ukuran video Sesuai dengan yang aslinya 😀
- Sehingga Kode iframe video tersebut menjadi seperti ini:
<iframe src="https://www.youtube.com/embed/v4Vj77hhsEE" style="min-height: 315px; width: 90%;" ></iframe>- Silahkan Atur width (untuk lebar) dan min-height (tinggi minimal video) sesuka hati kamu.
- Lalu Simpan Kode video tersebut di dalam Postingan kamu. di dalam Post :ke HTML bukan di Compose yah 🙂
- Terakhir tinggal publish video yang kamu share di blog itu 🙂
