Update: Embed Youtube Video With URL Only

Update: Embed Youtube Video With URL Only

Bola Hero Gawai

Update: Embed Youtube Video With URL Only

Update: Embed Youtube Video With URL Only
Postingan kali ini merupakan update postingan sebelumnya tentang cara embed Youtube video URL only with Jquery agar penulisannya benar-benar simple hanya cukup dengan menuliskan URL video Youtube saja di dalam postingan baik dalam editor postingan mode HTML maupun Compose.

Baca juga: Embed Youtube Video URL Only With Jquery

Dengan update kali ini, kita bisa benar-benar hanya menuliskan URL video Youtube saja di dalam postingan seperti ini: https://www.youtube.com/watch?v=HgFTKuo8i7I

Dan jquery akan otomatis mendeteksi URL video Youtube tersebut dan akan menggantinya menjadi iframe video Youtube. Sebagai demonya silahkan lihat di sini.

Untuk bukti bahwa yang ditulis hanya URL video Youtube saja, kita bisa lihat di page source halaman tersebut seperti di bawah ini.

page source

Untuk membuat seperti itu, silahkan gunakan kode di bawah ini.

Silahkan simpan kode di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");};
var videoEmbed = {
    invoke: function(){    
        $('.post-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 = '<div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';
              var html = html.replace(pattern, replacement);
        }
         return html;
    }
}
setTimeout(function(){
    videoEmbed.invoke();
},800);
//]]>
</script>
</b:if>

Perhatikan kode yang saya marking, jika di blog sudah terdapat Jquery Library (berapa pun versinya) silahkan hapus kode tersebut.

Kemudian simpan kode CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.videoyoutube{
    margin:20px auto;
    width:100%;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}
</style>
</b:if>

Kemudian SAVE edit HTML template blog Anda.

Untuk menampilkan video Youtube di postingan, silahkan paste video URL yang di-copy dari address bar video Youtube di editor postingan baik dalam mode HTML ataupun Compose seperti URL berikut sebagai contoh: https://www.youtube.com/watch?v=HgFTKuo8i7I. Dan embed video Youtube ini sudah responsive.

Embed Youtube Video With URL Only

Selamat mencoba.......

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!

×
×
×