Embed Youtube Video Responsive With Video Information

Ditulis oleh: Adhy Suryadi

Ditulis pada: 12/04/2014

#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%}

}

<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="'+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>

<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)">&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;http://www.youtube.com/embed/<span id="ytvid"></span>&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;</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>

var vidid = "FruaHqg9cog";

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