Cara Membuat Responsive Embed Video Youtube di Blog

Video Responsive di postingan Blog
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>
style="min-height: 315px; width: 90%;"
Saran saya: Gunakan Style ini agar Ukuran video Sesuai dengan yang aslinya :D
  • 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 :-)
pasang video youtube di blog menjadi responsive dan valid html5
  • Terakhir tinggal publish video yang kamu share di blog itu :)
      Sekian tutorial membuat video youtube menjadi Responsive dan Valid HTML 5 :) semoga membantu dan bermanfaat untuk kita semua :D :hebat jangan lupa yah untuk share artikel ini ke akun sosmed mu dan teman - teman blogger lain nya ;) dan buat kamu yang suka contoh video di atas monggo di subscribe channel video saya yah :D Makasih.

Jika ada yang ingin di tanyakanan / di diskusikan bersama saya, silahkan gabung ke forum saya

Join Now