Lazy Loading For Responsive Youtube Video With Javascript

Hari ini masih mengenai lazy loading untuk video youtube. Sebelumnya aku pernah membahas perihal cara menampilkan responsive video Youtube dengan javascript semoga menampilkan video Youtube di postingan menjadi lebih simple.

Baca juga: Embed Video Youtube Responsive Dengan Javascript

Dan sebelum postingan ini, aku juga membagikan trik cara menciptakan responsive youtube video dengan lazy loading onclick. Kemudian ada sobat Kompi Ajaib ada yang menanyakan untuk merubah secara otomatis (tanpa mengedit postingan) responsive youtube video dengan javascript yang sudah digunakannya menjadi memakai lazy loading onclick.

Baca juga: Responsive Youtube Video With Lazy Loading OnClick

Setelah aku utak-atik ternyata dapat juga untuk menunjukkan lazy loading onclick pada responsive youtube video dengan javascript tanpa harus mengedit ulang postingannya. Hanya tinggal mengganti javascript di edit HTML dan menambahkan CSS saja.

Untuk menggantinya silahkan ikuti langkahnya di bawah ini.

Silahkan cari arahan javascript yang sebelumnya sudah di pasang menyerupai arahan di bawah ini di atas arahan </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 silahkan ganti dengan javascript di bawah ini:

 <script>
 //<![CDATA[
 function embed(video) {
    document.write('<div class="youtube" onclick="videoPlay(this)"><div class="youtube-resposive"><img alt="Lazy Loading For Responsive Youtube Video With Javascript Lazy Loading For Responsive Youtube Video With Javascript" src="http://i.ytimg.com/vi/');
    document.write(video);
    document.write('/sddefault.jpg" width="500" height="281"/>');
    document.write('<!--<iframe src="http://www.youtube.com/embed/');
    document.write(video);
    document.write('?autoplay=1&autohide=1" frameborder="0" allowfullscreen="1"></iframe>--></div></div>');
 }
 //]]>
 </script>

Kemudian simpan arahan CSS di bawah ini di atas arahan </head> menyerupai postingan sebelumnya.

 <b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
 <style type='text/css'>
 /*<![CDATA[*/
 .youtube{
     text-align:center;
     margin:0 auto;
     width:100%;
 }
 .youtube-resposive{
     position:relative;
     padding-bottom:56.25%;
     height:0;
     overflow:hidden;
     margin:0;
 }
 .youtube img{
     width:100%;
     height:auto;
     margin-top:-9%;
     z-index:1;
 }
 .youtube iframe{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     z-index:2;
 }
 .youtube-resposive:before{
     content:"\f16a";
     font-family:FontAwesome;
     font-size:400%;
     position:absolute;
     top:50%;
     left:50%;
     margin:-32px 0 0 -32px;
     cursor:pointer;
     opacity:.7;
     transition: all 0.2s ease-out;
 }
 .youtube-resposive:hover:before{
     color:red!important;
     opacity:1;
 }
 /*]]>*/
 </style>
 </b:if>

Kemudian simpan juga arahan di bawah ini di atas arahan </body>

 <b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
 <script>
 //<![CDATA[
 function videoPlay(anchor){
    anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
    anchor.onclick= null;
    return false;
 };
 //]]>
 </script>
 </b:if>

Dan jangan lupa pastikan bahwa Anda sudah memasang font-awesome di blog Anda.

Maka secara otomatis video yang sudah dipasang dengan javascript sebelumnya akan otomatis bermetamorfosis memakai lazy loading onclick.

Dan untuk menampatkan video youtube di postingan selanjutnya, caranya masih sama menyerupai sebelumnya yakni cukup memakai arahan menyerupai di bawah ini di dalam editor postingan dalam mode HTML.

 <script>embed("jlQVAlmXqoE");</script>

Silahkan ganti arahan jlQVAlmXqoE dengan ID video youtube yang ingin ditampilkan di dalam postingan sehingga akan tampak menyerupai embed video di halaman demo ini.

Demo

Sumber https://www.kompiajaib.com/

Share this post