$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Cara Membuat Responsive Embed Video Youtube di 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

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.

COMMENTS

BLOGGER
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Cara Membuat Responsive Embed Video Youtube di Blog
Cara Membuat Responsive Embed Video Youtube di 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
http://4.bp.blogspot.com/-FLElkmM2F3I/VZZ0zovbmPI/AAAAAAAAEWo/i68nB2Q4c4Q/s1600/responsive%2Bvideo%2Byoutube.gif
http://4.bp.blogspot.com/-FLElkmM2F3I/VZZ0zovbmPI/AAAAAAAAEWo/i68nB2Q4c4Q/s72-c/responsive%2Bvideo%2Byoutube.gif
BLOG X KOMO
http://www.xkomo.com/2015/07/cara-membuat-responsive-embed-video-youtube.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2015/07/cara-membuat-responsive-embed-video-youtube.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy