Cara Memasang Video Youtube Responsive di Blog mudah

Penggunaan properti video dalam sebuah artikel blog makin marak sejak YouTube meluncurkan fitur embed video. Fitur ini memungkinkan kita untuk menayangkan video YouTube secara langsung di blog atau web kita. Yang menjadi masalah adalah tampilan video YouTube tidak responsive meskipun template blog yang kita gunakan sudah responsive. Untuk itu kita perlu menambahkan HTML dan CSS agar video YouTube tayang responsive di blog. Nah. kali ini saya akan menjelaskan dua cara untuk memasang video dari YouTube ke blog,
1).Yang pertama adalah cara langsung Yaitu dengan memasang kode embed video YouTube di dalam tag iframe.

1).Klik Bagikan

2).Klik sematkan

3).Copy Kode

4).Masukan ke blog rubah dulu mode Penulis ke Mode HTML

Catatan:

Meskipun penggunaan tag iframe di dalam postingan dikatakan kurang baik dalam hal SEO, menurut situs-situs SEO checker. Akan tetapi cara ini memiliki beberapa kelebihan, diantaranya adalah sebagai berikut.

Embed video YouTube lebih cepat dimuat

Background image cover dari video YouTube bisa tampil menjadi gambar thumbnail (jika posisinya sebagai gambar pertama dari postingan blog).

2).Cara ke dua, untuk memasaukan video youtube tampil responsive di blog atau website kalian, tatacara sebagai berikut. taruh kode CSS di bawah ini tepat diatas/didalam kode ]]><b/skin>

CSS

/* By https://ztncoding.blogspot.com */
.embedded-video-large{background-color:#000;background-position:center;background-size:cover;cursor:pointer;display:inline-block; width: 400px; height: 230px; max-width:100%;overflow:hidden;position:relative}.videoyoutube{text-align:center;margin:20px auto;width:80%;}.video-responsive{position:relative;padding-bottom:56.25%;overflow:hidden;margin:8px}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}@media screen and (max-width:400px){.videoyoutube{width:100%}}

pasang code Html di dalam postingan.

HTML

<div class="videoyoutube">
<div class="video-responsive">
<iframe allowfullscreen="1" class="embedded-video-large" src="https://www.youtube.com/embed/KODE_ID_VIDEO?rel=0"></iframe>
</div>
</div>

ganti https://www.youtube.com/embed/KODE_ID_VIDEO dengan link video youtube yang ingin di tampilkan, untuk ?rel=0 jangan ikut diganti.