Cara Memasang Video YouTube Responsive di Blog

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 / web kita. Yang jadi masalah adalah tampilan video YouTube tidak responsive meskipun template blog yang kita gunakan sudah responsive. Untuk itu kita perlu menambahkan beberapa kode agar video YouTube menjadi responsive di blog.

Pada kesempatan ini saya akan menjelaskan dua cara untuk memasang embed video YouTube di blog, serta cara mendapatkan kode embed video YouTube dengan HP Android, beserta keterangan terkait embed video YouTube di blog.

Cara langsung
Yaitu dengan memasang kode embed video YouTube di dalam tag iframe. 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.

  1. Embed video YouTube lebih cepat dimuat
  2. Background image cover dari video YouTube bisa tampil menjadi gambar thumbnail, jika posisinya sebagai gambar pertama dari sebuah postingan.

Pemasangan

Untuk membuat video YouTube responsive di blog, letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> pada template blog Anda. Atau bisa juga di dalam postingan pada mode HTML dengan dibungkus tag style.

.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%}}

Cara memasang video YouTube di postingan blog

Untuk memasang video YouTube, gunakan format kode di bawah ini untuk memanggil / menampilkan embed video YouTube di blog. Tempatkan kode tersebut pada mode HTML, saat Anda membuat artikel / postingan.

<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 tulisan KODE_ID_VIDEO dengan kode id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

Keterangan:Kode allowfullscreen="1" fungsinya untuk memunculkan tombol layar penuh / full screen.

Kode rel=0 fungsinya agar di akhir video tidak ditampilkan video terkait, biasanya ada 50 vidoe terkait dan jika di klik maka akan langsung di putar di YouTube, bukan di blog Anda.

Tags: