Embed Video Youtube Responsive Dengan Javascript

Banyak cara untuk menampilkan video Youtube di postingan blog, salah satunya dengan memakai javascript. 

Pada postingan ihwal video Youtube sebelumnya, aku sudah sharing cara embed video Youtube hanya dengan URL. Penempatan embed video di postingan menjadi lebih simple sebab hanya menyimpan URL videonya saja. Namun script tersebut bekerja dengan memakai Jquery.

Nah dengan javascript ini, kita tidak memerlukan Jquery sehingga akan menjadi lebih ringan. Dan supaya videonya menjadi responsive, kita memakai arahan CSS dari video Youtube Responsive terdahulu namun ditulis pribadi ke dalam javascriptnya sehingga kita tidak perlu menulis arahan CSS di atas skin blog.

Jika ingin memakai cara ini silahkan gunakan arahan javascriptnya menyerupai 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 aku marking ini silahkan ganti dengan arahan id unik video Youtube menyerupai tampak pada gambar di bawah ini yang dikasih kotak merah.

Atau Anda dapat menyimpan javascript di bawah ini di atas arahan </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 arahan javascript yang di bawah ini.

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

Tinggal ganti arahan id unik video Youtube menyerupai pada gambar di atas. Demonya menyerupai pada embed video di bawah ini (penulisannya pribadi dengan semua javascriptnya di tulis di postingan menyerupai langkah pertama di atas).

Demo on Jsfiddle

Untuk memasang iframe lainnya menyerupai iframe iklan atau widget supaya valid HTML5 silahkan simak di sini.
Sumber https://www.kompiajaib.com/

Share this post