Embed Youtube Video Responsive With Video Information
Bahasan kali ini masih sama ibarat pada postingan sebelumnya ialah masih seputar embed video Youtube di postingan. Namun sedikit berbeda dengan postingan sebelumnya ialah kali ini kita akan embed video Youtube yang dilengkapi dengan video Information mengenai title lagu, durasi, author dan URL juga isyarat embed video dan tombol share.
Yang suka jalan-jalan niscaya 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 isyarat embed video dan tombol share.
Nah postingan kali ini terinspirasi dari situs tersebut, lalu aku mencoba menciptakan hal serupa namun dengan isyarat yang berbeda dan aku buat responsive dan mencoba menciptakan 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 isyarat
</head> atau </body> <script type='text/javascript'>
//<![CDATA[
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="Embed Youtube Video Responsive With Video Information">'+f+"</a>");$("#ytvduration").html(c+" Seconds");$("#ytvthumb").html('<img src="'+a+'" alt ="'+h+'" title="Embed Youtube Video Responsive With Video Information" />');$("#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 menciptakan embed video di postingan, silahkan gunakan isyarat 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=" " target="_blank" title="Embed Youtube Video Responsive With Video Information">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 isyarat di atas pada berikut:
var vidid = "FruaHqg9cog"; Silahkan ganti kode unik ID video Youtube
FruaHqg9cog yang aku marking di atas dengan isyarat unik ID video Youtube yang ingin Anda tampilkan ibarat pada gambar di bawah ini. Untuk semua info 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 isyarat HTML di atas ibarat 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 kalau belum ada, sebaiknya silahkan simpan di atas isyarat
</body> sehingga kalau 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/
0 Response to "Embed Youtube Video Responsive With Video Information"
Posting Komentar