✔ Cara Memasang Video Youtube Responsive Di Blog

Penggunaan properti video dalam sebuah artikel blog makin marak semenjak YouTube meluncurkan fitur embed video. Fitur ini memungkinkan kita untuk menayangkan video YouTube secara eksklusif di blog / web kita. Yang jadi dilema ialah tampilan video YouTube tidak responsive meskipun template blog yang kita gunakan sudah responsive. Untuk itu kita perlu menambahkan beberapa arahan biar video YouTube menjadi responsive di blog.

Pada kesempatan ini aku akan menjelaskan dua cara untuk memasang embed video YouTube di blog, serta cara mendapat arahan embed video YouTube dengan HP Android, beserta keterangan terkait embed video YouTube di blog.

Cara langsung
Yaitu dengan memasang arahan embed video YouTube di dalam tag iframe. Meskipun penggunaan tag iframe di dalam postingan dikatakan kurang baik dalam hal SEO, berdasarkan situs-situs SEO checker. Akan tetapi cara ini mempunyai beberapa kelebihan, diantaranya ialah sebagai berikut.

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

Pemasangan

Untuk menciptakan video YouTube responsive di blog, letakkan arahan CSS di bawah ini sempurna di atas kode ]]></b:skin> atau </style> pada template blog Anda. Atau dapat 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 arahan di bawah ini untuk memanggil / menampilkan embed video YouTube di blog. Tempatkan arahan tersebut pada mode HTML, ketika Anda menciptakan 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 arahan 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 biar di final video tidak ditampilkan video terkait, biasanya ada 50 vidoe terkait dan bila di klik maka akan eksklusif di putar di YouTube, bukan di blog Anda.

Bagikan Artikel ini