Cara Menampilkan atau Embed Video Youtube Responsive di Blog

Selain dengan adanya gambar, postingan dengan menampilkan video youtube juga dapat menambah minat pengunjung blog. Biasanya hal ini diterapkan oleh blog yang membahas tentang tutorial, sinopsis film, musik, dan sebagainya yang membutuhkan dukungan video.

Banyak blog di luar sana yang menjelaskan tutorial serupa, tetapi rata-rata hanya dengan cara menyalin url video nya saja. Memang cara tersebut lebih simpel. Namun, dengan menggunakan cara tersebut video yang ditampilkan tidak responsive dan juga dapat menambah waktu loading blog Anda.

Nah Kali ini saya akan membagikan tutorial cara menampilkan/embed video youtube responsive dengan javascript di blog. Bagi Anda yang ingin menampilkan/embed video youtube di blog Anda, ada baiknya menggunakan trik ini. Tertarik untuk mencobanya? silahkan ikuti tutorial berikut ini.

Cara Menampilkan atau Embed Video Youtube Responsive di Blog

Silahkan letakkan kode Javascript di bawah ini di atas kode </head>

<script type="text/javascript">
//<![CDATA[
function embed(video) {
document.write('<div style="text-align:center;background:linear-gradient(to bottom,#fefefe 0,#d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="http://www.youtube.com/embed/');
document.write(video);
document.write('" frameborder="0" allowfullscreen="1"></iframe></div></div>');
}
//]]>
</script>

Kemudian untuk menampilkan videonya di postingan, letakkan kode di bawah ini di postingan pada mode HTML.

<script type="text/javascript">embed("B1AV75IwR68");</script>

Ganti kode B1AV75IwR68 yang saya marking dengan kode id unik video Youtube Anda. Contohnya seperti yang tampak pada gambar di bawah ini yang saya tandai dengan kotak merah.

Cara Menampilkan atau Embed Video Youtube Responsive di Blog

Setelah itu silahkan Publikasikan postingan Anda dan lihat hasilnya. Untuk demonya silahkan Anda lihat pada embed video di bawah ini.

Video demonya kalo berkenan ditonton dulu ya sampai selesai, kalau bisa sih dilike, komentar, subscribe, dan dishare juga hehe semoga aja dapat menghibur Anda.

Sekian cara menampilkan/embed video youtube responsive dengan javascript di blog. Semoga bermanfaat.

Sumber video : https://www.youtube.com/channel/UC3GtlZCLul1IPBfBCerdDbg (This my friends channel)

Leave a Reply