Ditulis oleh: Ditulis pada: 12/03/2014
Banyak cara untuk menampilkan video Youtube di postingan blog, salah satunya dengan menggunakan javascript.
Pada postingan tentang video Youtube sebelumnya, saya sudah sharing cara embed video Youtube hanya dengan URL. Penempatan embed video di postingan menjadi lebih simple karena hanya menyimpan URL videonya saja. Namun script tersebut bekerja dengan menggunakan Jquery.
Nah dengan javascript ini, kita tidak memerlukan Jquery sehingga akan menjadi lebih ringan. Dan agar videonya menjadi responsive, kita menggunakan kode CSS dari video Youtube Responsive terdahulu namun ditulis langsung ke dalam javascriptnya sehingga kita tidak perlu menulis kode CSS di atas skin blog.
Jika ingin menggunakan cara ini silahkan gunakan kode javascriptnya seperti di bawah ini dan simpan di postingan pada mode HTML.
<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>
<script type="text/javascript">embed("G7bdRrFAMcQ");</script>
Kode
G7bdRrFAMcQ yang saya marking ini silahkan ganti dengan kode id unik video Youtube seperti tampak pada gambar di bawah ini yang dikasih kotak merah.
Atau Anda bisa menyimpan javascript di bawah ini di atas kode
</head> untuk memudahkan penulisannya di postingan.
<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>
Dan untuk untuk menampilkan videonya di postingan, cukup gunakan kode javascript yang di bawah ini.
<script type="text/javascript">embed("G7bdRrFAMcQ");</script>
Tinggal ganti kode id unik video Youtube seperti pada gambar di atas. Demonya seperti pada embed video di bawah ini (penulisannya langsung dengan semua javascriptnya di tulis di postingan seperti langkah pertama di atas).
Untuk memasang iframe lainnya seperti iframe iklan atau widget agar valid HTML5 silahkan simak di sini.