Embed Youtube Video Responsive With Video Information

by kompiajaib

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...

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:&#39;Courier New&#39;,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%}
}

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+'">'+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"})})});