Bahasan kali ini masih sama seperti pada postingan sebelumnya yaitu masih seputar embed video Youtube di postingan. Namun sedikit berbeda dengan postingan sebelumnya yaitu kali ini kita akan embed video Youtube yang dilengkapi dengan video Information mengenai title lagu, durasi, author dan URL juga kode embed video dan tombol share.
Yang suka jalan-jalan pasti Anda pernah mampir di
Developphp.com kan? Nah di situs tersebut terdapat embed video Youtube yang unik yang menyertakan video Information mengenai title lagu, durasi, author dan URL juga kode embed video dan tombol share.
Nah postingan kali ini terinspirasi dari situs tersebut, kemudian saya mencoba membuat hal serupa namun dengan kode yang berbeda dan saya buat responsive dan mencoba membuat penyematan videonya semudah mungkin.
Untuk demonya silahkan lihat pada URL demo di bawah ini. silahkan coba tombol-tombol info, share, dan embed di atas player.
Yang tertarik untuk mencobanya silahkan gunakan kode-kode di bawah ini.
Kode CSS
#ytvbox{width:80%;margin:20px auto;padding:0 0 30px;background:#333;border-radius:4px;overflow:hidden;position:relative;font-family:Arial}
#ytvdetails{width:auto;margin:0 auto;padding:5px 0 0;color:#fff;font-size:11px}
.video-box{background:#333}
.video-title{position:absolute;width:92%;bottom:7px;left:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;display:inline-block}
#ytvdetails a{text-decoration:none;color:#efefef}
#ytvdetails .info{padding:0 0 8px;display:block;position:relative}
.info-button{background:#242424 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAgCAYAAAAv8DnQAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDEvMjEvMTP6xLgqAAAAKUlEQVQ4jWM0MzP7z4AHsPz/j1eegQmv7FAxYdSR1DJhSDhyhHiTcisA1vQ3z2wKLhQAAAAASUVORK5CYII=) repeat-x;border:#232323 1px solid;border-top:#666 1px solid;border-radius:4px;padding:3px 8px;display:inline;margin-left:10px;margin-top:5px;cursor:pointer;float:left;color:#c3c3c3}
.info-button:hover{background:#232323;color:#ffbf48}
#ytvdetails .info-vid{padding:10px;min-height:90px;display:none;background:#555;line-height:1.5em;color:#c3c3c3}
#ytvdetails .info-vid img{float:left;margin-right:10px;width:160px}
.share-vid,.embed-vid{padding:10px 10px 7px;height:auto;display:none;background:#555;color:#c3c3c3;line-height:1.2em;}
.share-vid{position:relative}
.embed-box{background:#000;padding:5px;font-size:12px;margin-bottom:8px;font-family:'Courier New',Courier,monospace;}
.embed-box:focus{outline:0}
#show-video{display:none;width:70px}
@media screen and (max-width:600px){#ytvdetails .info-vid img{float:left;margin-right:0;margin-bottom:10px;width:100%;height:auto}
#ytvbox{width:100%}
}
Kode Javascript
Silahkan simpan di atas kode </head> atau </body>
<script type='text/javascript'>
function getYouTubeInfo(){$.ajax({url:"http://gdata.youtube.com/feeds/api/videos/"+vidid+"?v=2&alt=json&orderby=published&prettyprint=true",dataType:"jsonp",success:function(a){parseresults(a)}})}function parseresults(e){var h=e.entry.title.$t;var i=e.entry.media$group.media$category[0].label;var g=e.entry.published.$t.substr(0,10);var f=e.entry.author[0].name.$t;var b=e.entry.media$group.media$credit[0].$t;var c=e.entry.media$group.yt$duration.seconds;var d="https://www.youtube.com/watch?v="+vidid;var a=e.entry.media$group.media$thumbnail[1].url;var j=vidid;$("#ytvtitle").html(h);$("#ytvtitle2").html(h);$("#ytvpublish").html(g);$("#ytvauthr").html('<a target="_blank" href="https://www.youtube.com/user/'+b+'" title="'+f+'">'+f+"</a>");$("#ytvduration").html(c+" Seconds");$("#ytvthumb").html('<img src="'+a+'" alt ="'+h+'" title="'+h+'" />');$("#ytvurl").html(d);$("#ytvid").html(j);$("#ytvply").html('<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/'+vidid+'" allowfullscreen="true" frameborder="0"></iframe>')}$(document).ready(function(){getYouTubeInfo()});$(function(){$("#info-video").click(function(){$(".info-vid").slideToggle();$(".share-vid").hide();$(".embed-vid").hide();$(".video-box").hide();$("#show-video").css({display:"inline"})});$("#share-video").click(function(){$(".share-vid").slideToggle();$(".info-vid").hide();$(".embed-vid").hide();$(".video-box").show();$("#show-video").css({display:"none"})});$("#embed-video").click(function(){$(".embed-vid").slideToggle();$(".info-vid").hide();$(".share-vid").hide();$(".video-box").hide();$("#show-video").css({display:"inline"})});$("#show-video").click(function(){$(".video-box").show();$(".info-vid").hide();$(".share-vid").hide();$(".embed-vid").hide();$("#show-video").css({display:"none"})})});
</script>
Kode HTML
Untuk menyimpannya atau membuat embed video di postingan, silahkan gunakan kode HTML di bawah ini. Copy dan paste kodenya dan simpan pada mode HTML.
<script>
var vidid = "FruaHqg9cog";</script>
<div id="ytvbox">
<div class="video-title">
<span id="ytvtitle2"></span>
</div>
<div id="ytvdetails">
<div class="info">
<div class="info-button" id="info-video">Info</div>
<div class="info-button" id="share-video">Share / Like</div>
<div class="info-button" id="embed-video">Embed</div>
<div class="info-button" id="show-video">Show Video</div>
<div style="clear:both"></div>
</div>
<div class="info-vid">
<div id="ytvthumb"></div>
<div><b>Title</b>: <span id="ytvtitle" ></span></div>
<div><b>Author</b>: <span id="ytvauthr" ></span></div>
<div><b>Published</b>: <span id="ytvpublish" ></span></div>
<div><b>Duration</b>: <span id="ytvduration" ></span></div>
<div><b>URL</b>: <span id="ytvurl"></span></div>
</div>
<div class="share-vid">
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url' style="float:left;margin-right:25px;margin-top:0"></div>
<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter' style="margin-left:110px">Tweet</a>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));</script>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'></span>
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js' type='text/javascript'></script>
</div>
<div class="embed-vid">
<div class="embed-in">
<div class="embed-box" contenteditable="true" onclick="document.execCommand('selectAll',false,null)"><iframe width="560" height="315" src="http://www.youtube.com/embed/<span id="ytvid"></span>" frameborder="0" allowfullscreen></iframe></div>You can embed this video on your blog or web page by copying the video embed code above and pasting it into the source code of your page. Adjust the width and height to specify the size you would like it to display. If you want to embed video like this, please go to <a href="http://www.kompiajaib.com/2014/12/embed-youtube-video-responsive-with.html" target="_blank" title="Embed Video Tutorial">here</a>
</div>
</div>
<div class="video-box">
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;">
<div id="ytvply"></div>
</div>
</div>
</div>
</div>
Anda hanya perlu mengganti kode unik ID video Youtube pada kode di atas pada berikut:
var vidid = "FruaHqg9cog";
Silahkan ganti kode unik ID video Youtube FruaHqg9cog yang saya marking di atas dengan kode unik ID video Youtube yang ingin Anda tampilkan seperti pada gambar di bawah ini.
Untuk semua informasi video dan lainnya akan otomatis terisi. Dan bagi yang di blognya sudah terdapat tombol like FB HTML5, tombol Tweet, dan tombol +1, silahkan hapus javascript untuk tombol-tombol tersebut pada kode HTML di atas seperti kode-kode berikut di bawah ini.
<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));</script>
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js' type='text/javascript'></script>
Atau jika belum ada, sebaiknya silahkan simpan di atas kode </body> sehingga jika akan menampilkan video lainnya pada postingan lainnya tidak perlu menyertakan lagi kode-kode javascript sosial media tersebut.
Dan pastikan Anda sudah menyimpan Jquery Library (berapa pun versinya) di template blog Anda.
Untuk melihat responsive embed video ini, silahkan coba pada link demo JSFiddle di bawah ini, silahkan geser-geser kolomnya.
Source Code: http://www.techtweaker.com/retrieve-youtube-video-details-using-javascript/
