Skip to content

Instantly share code, notes, and snippets.

/Youtube API3 + jQuery: Playlist items to itemsHTML and Magnific Popup.markdown

Created June 25, 2015 16:50
Show Gist options
  • Save anonymous/6594cf0d3ff41910d72d to your computer and use it in GitHub Desktop.
Save anonymous/6594cf0d3ff41910d72d to your computer and use it in GitHub Desktop.
Download ZIP
Youtube API3 + jQuery: Playlist items to itemsHTML and Magnific Popup
Raw
index.html
.wrapper
section#videos.videos-list.row.container-fluid.video-ready
.row
article.video.col-sm-4.video-template(data-.video="[[VIDEOID]]")
a(href='http://www.youtube.com/watch?v=[[VIDEOID]]')
.thumb
img(src="[[THUMBURL]]").img-responsive
h4.title [[TITLE]]
ul.metas.list-inline
li.meta.meta-publicado
label Publicado:
| [[SINCE]]
li.meta.meta-visitas
label Visitas:
| [[VIEWS]]
Raw
script.js
/***********************
SETUP
************************/
/* VARIALBES
************************/
var YT_apy_key = "AIzaSyAryVoK1lGJkNmGVMY1uk5YXor-svZ14cw";
var YT_playlistID = "UUO39ff9JbAyWNDz4HsE-cLw";
var googleapisURL = "https://www.googleapis.com/youtube/v3";
var YT_url_list = googleapisURL +"/playlistItems?part=contentDetails&playlistId="+ YT_playlistID +"&key="+ YT_apy_key +"&maxResults=50";
var YT_url_items = googleapisURL +"/videos?key="+ YT_apy_key +"&part=snippet,statistics&fields=items(id,snippet(title,publishedAt,thumbnails),statistics(viewCount))&id=";
/* SETTINGS
************************/
moment.locale('es-AR');//Date language
/* FUNCTIONS
************************/
/* GET PLAYLIST */
var get_YT_playlist = function(playlistID){
if( typeof playlistID == 'undefined' ){
return;
};
var arrVideosID = [];
$.get(YT_url_list, function(data) {
$.each(data.items, function(key, item){
arrVideosID.push(item.contentDetails.videoId);
})
get_YT_videoData(arrVideosID.join(','));
})
.fail(function() {
alert("error");
});
}
/* GET VIDEOS DATA */
var get_YT_videoData = function(videos_list) {
var arrVideosID = [];
$.get(YT_url_items + videos_list, function(data) {
get_videosHTML(data.items, $('#videos') );
})
.fail(function() {
alert("error");
});
}
/* GET VIDEO ITEM HTML */
var get_videosHTML = function(data, target) {
var tpl_videoHTML = $(target).find('.video-template').wrap('<div/>').parent().html();
$(target).find('.video-template').unwrap();
tpl_videoHTML = tpl_videoHTML.replace('video-template', '');
var output = '';
$.each(data, function(key, video) {
var videoHTML = tpl_videoHTML;
var video_ID = video.id;
var video_thumb = video.snippet.thumbnails.default.url;
if (!$.isEmptyObject(video.snippet.thumbnails.medium)) {
video_thumb = video.snippet.thumbnails.medium.url;
}
var video_title = video.snippet.title;
var video_published = moment(video.snippet.publishedAt, "YYYYMMDD").fromNow();
var video_viewCount = video.statistics.viewCount;
videoHTML = videoHTML.replace(/\[\[VIDEOID\]\]/g, video_ID);
videoHTML = videoHTML.replace(/\[\[THUMBURL\]\]/g, video_thumb);
videoHTML = videoHTML.replace(/\[\[TITLE\]\]/g, video_title);
videoHTML = videoHTML.replace(/\[\[SINCE\]\]/g, video_published);
videoHTML = videoHTML.replace(/\[\[VIEWS\]\]/g, video_viewCount);
output += videoHTML;
});
$(target).find('.video-template').parent().append(output);
$(target).find('.video-template').remove();
$(target).addClass('video-ready');
set_videosPopup();
}
var set_videosPopup = function(){
$('#videos .video a').click(function(){
var videoURL = $(this).attr('href');
jQuery.magnificPopup.open({
items: {
src: videoURL
},
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: '//www.youtube.com/embed/%id%?autoplay=1'
}
},
srcAction: 'iframe_src',
}
});
});
}
var init = function(){
get_YT_playlist(YT_playlistID);
}
/* DOCUMENT READY
*********************************/
$(document).ready(function() {
init();
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
Raw
style.css
body{
padding: 1em;
}
.wrapper{
width: 960px;
margin: 0 auto;
}
/**************************/
.video{
opacity: 0;
&.video-template{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
.img-responsive{
/*width: 100%;*/
}
&:hover{
.title{
text-decoration: underline;
}
}
.meta{
color: #666;
&:before{
font-family: FontAwesome;
font-size: .8em;
}
&.meta-publicado:before{
content: '\f133';
}
&.meta-visitas:before{
content: '\f06e';
font-size: .9em;
}
label{
display: none;
}
}
}
.videos-list{
background-color: #ddd;
min-height: 250px;
min-width: 90%;
position: relative;
border: 3px solid #ccc;
&:before{
content: "\f017";
color: #888;
font-family: fontAwesome;
font-size: 2em;
position: absolute;
display: block;
width: 100px;
height: 40px;
text-align: center;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -20px;
}
&.video-ready{
background: none;
border: none;
&:before{
content: '';
}
.video{
opacity: 1;
}
}
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css" rel="stylesheet" />
Raw
Youtube API3 + jQuery: Playlist items to itemsHTML and Magnific Popup.markdown

Youtube API3 + jQuery: Playlist items to itemsHTML and Magnific Popup

Retive a JSON of videos by video ID and build the HTML for the videos.

A Pen by Lucas Dasso on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment