Embed Youtube Video Url Only With Jquery

Embed Youtube Video URL Only With Jquery - Let's talk less do more! Begitulah kira-kira hehehe... Dengan jquery kita dapat memasang video Youtube hanya dengan menuliskan URL videonya saja di postingan HTML.

Dengan begitu kita dapat menghemat tenaga untuk menciptakan postingan yang menyertakan video di dalamnya.

Untuk memasang video Youtube di postingan ini, kita memakai CSS style video Youtube responsive yang sudah saya posting sebelumnya semoga ramah dengan banyak sekali device yang dipakai termasuk mobile atau handphone.

Yang pertama dilakukan ialah mencatat url videonya dari address kafe browser yang membuka halaman video Youtube-nya ibarat pada gambar di bawah ini. Sebagai pola saya ambil video "Sakitnya Tuh Di sini" mumpung lagi booming hehehe....

 http://www.youtube.com/watch?v=yLeQAS5xSAg

Gunakan CSS style video Youtube responsive di bawah ini. Jika sebelumnya Anda sudah pernah memasangnya, maka langkahi step ini.

 .videoyoutube{
     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;
 }
 .video-responsive {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   margin:8px;
 }
 .video-responsive iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border:0;
 }

Kemudian simpan jquery di bawah ini di atas instruksi </body>

 <script type='text/javascript'>
 var videoEmbed = {
     invoke: function(){      
         $('body').html(function(i, html) {
             return videoEmbed.convertMedia(html);
         });     
     },
     convertMedia: function(html){
           var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;       
         if(pattern.test(html)){
               var replacement = '<iframe height="281" width="500" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
               var html = html.replace(pattern, replacement);
         }
          return html;
     }
 }
 setTimeout(function(){
     videoEmbed.invoke();
 },800);
 </script>

Kemudian untuk memasang video Youtube di postingan silahkan gunakan instruksi di bawah ini.

 <div class="videoyoutube">
 <div class="video-responsive">
 URL VIDEO YOUTUBE DI SINI
     </div>
     </div>

Makara jikalau memakai URL video pada pola di atas tadi, maka kodenya menjadi ibarat berikut ini.

 <div class="videoyoutube">
 <div class="video-responsive">
 https://www.youtube.com/watch?v=yLeQAS5xSAg
     </div>
     </div>

Bagi yang tidak ingin memakai video responsive, maka penulisannya semakin simple ialah hanya memakai instruksi jquery-nya saja dan untuk memasangkan video di postingannya hanya memakai URL videonya saja tanpa div ibarat di atas pada mode postingan HTML. Dan jangan lupa, pastikan pada template Anda sudah terpasang jquery library berapa pun versinya.

DEMO

Baca juga: Update: Embed Youtube Video With URL Only


Sumber https://www.kompiajaib.com/

Share this post