Skip to main content

Embed Video Youtube Responsive Dengan Javascript

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB