<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- http://salman-w.blogspot.ca/2010/01/retrieve-youtube-video-title.html --> <div class="container"> <div class="row clearfix"> <div class="col-md-8 column"> <h3 class="text-primary"> TEST: YouTube Player </h3> How to retrieve images and data from youtube and customize player. <p> <!-- use this tool for options https://developers.google.com/youtube/youtube_player_demo --> <iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/zJahlKPCL9g?autoplay=0&modestbranding=1&theme=light" frameborder="0" allowfullscreen> </iframe> <hr> <a href="//www.youtube.com/embed/zJahlKPCL9g#t=25" target="yt"> <img src="http://img.youtube.com/vi/zJahlKPCL9g/1.jpg" class="img-rounded alt=""> </a> <img src="http://img.youtube.com/vi/zJahlKPCL9g/2.jpg" class="img-rounded alt=""> <img src="http://img.youtube.com/vi/zJahlKPCL9g/3.jpg" class="img-rounded alt=""> <hr> </p> </div> <div class="col-md-4 column"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title"> YouTube HERE </h3> </div> <div class="panel-body"> <script type="text/javascript"> function youtubeFeedCallback(data) { // youtube video id var ytid='zJahlKPCL9g'; var s = ''; s += ''; s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>'; s += '<h3>' + data.entry.title.$t + '</h3><br/>'; s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>'; s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>'; s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>'; if (data.entry.gd$rating) { s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>'; } s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>'; s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>'; s += '<br/><a href="' + data.entry.media$group.media$player.url + '" target="_blank" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-facetime-video"></span> Watch on YouTube</a>'; document.write(s); } </script> <script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/zJahlKPCL9g?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script> <hr> </div> <div class="panel-footer"> Panel footer </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <h2>TEST: YouTube Film Strip</h2> <p> <!-- use this tool for options https://developers.google.com/youtube/youtube_player_demo --> <a href="//www.youtube.com/embed/zJahlKPCL9g#t=25" target="yt"> <img src="http://img.youtube.com/vi/zJahlKPCL9g/1.jpg" class="img-rounded alt=""> </a> <img src="http://img.youtube.com/vi/zJahlKPCL9g/2.jpg" class="img-rounded alt=""> <img src="http://img.youtube.com/vi/zJahlKPCL9g/3.jpg" class="img-rounded alt=""> </div> <hr> <script type="text/javascript"> function youtubeFeedCallback(data) { var s = ''; s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>'; s += '<b>Title:</b> ' + data.entry.title.$t + '<br/>'; s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>'; s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>'; s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>'; if (data.entry.gd$rating) { s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>'; } s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>'; s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>'; s += '<br/><a href="' + data.entry.media$group.media$player.url + '" target="_blank" class="btn btn-primary btn-danger">Watch on YouTube</a>'; document.write(s); } </script> <script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/zJahlKPCL9g?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script> <hr> <a href="#" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-facetime-video"></span> Watch on YouTube </a> </div>

body { background-color:#333; margin-top:18px } .container { padding:33px; background-color:#fff }