Update: Embed Youtube Video With Url Only
Postingan kali ini merupakan update postingan sebelumnya wacana cara embed Youtube video URL only with Jquery biar 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 sanggup benar-benar hanya menuliskan URL video Youtube saja di dalam postingan ibarat 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 sanggup lihat di page source halaman tersebut ibarat di bawah ini.
Untuk menciptakan ibarat itu, silahkan gunakan instruksi di bawah ini.
Silahkan simpan instruksi di bawah ini di atas instruksi
</body> <b:if cond='data:blog.pageType == "item"'>
<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 instruksi yang aku marking, kalau di blog sudah terdapat Jquery Library (berapa pun versinya) silahkan hapus instruksi tersebut.
Kemudian simpan instruksi CSS di bawah ini di atas instruksi
</head> <b:if cond='data:blog.pageType == "item"'>
<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 kafe video Youtube di editor postingan baik dalam mode HTML ataupun Compose ibarat URL berikut sebagai contoh: https://www.youtube.com/watch?v=HgFTKuo8i7I. Dan embed video Youtube ini sudah responsive.
Selamat mencoba....... Sumber https://www.kompiajaib.com/
0 Response to "Update: Embed Youtube Video With Url Only"
Posting Komentar