Embed Video Youtube Responsive Dengan Javascript

Embed Video Youtube Responsive Dengan Javascript

Bola Hero Gawai

Embed Video Youtube Responsive Dengan Javascript

Embed Video Youtube 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.

Kode ID Unik Video Youtube

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×