Mostrar Videos de mi Canal de Youtube mediante la API v3 y jQuery.

jQuery Tutoriales🗓️ 05-06-2015 | 🔄 19-05-2019 | 👤 Crear un Post, Eventos Devs, Foro

diseño web frontend javascript jquery js youtube

Nube Colectiva

nubecolectiva.com/

Post Tags

diseño web, frontend, javascript, jquery, js, youtube

Tiempo de lectura: 4 minuto(s)

Tabla de Contenidos

Demo Github

Con la ultima actualización de la versión de la API de Google, v2 a la v3, se cayeron muchas aplicaciones que listaban los vídeos de nuestro canal de Youtube, mostrando la siguiente imagen:

Bueno, en esta oportunidad usaremos uno de los Frameworks de Javascript mas populares, para obtener un listado de todos nuestros vídeos subidos a nuestro canal de Youtube.

Primero creamos el siguiente archivo:

script.js


var channels_name='GoogleDevelopers', // Solo la parte del nombre de mi canal, Ejemplo: --> https://www.youtube.com/user/GoogleDevelopers
channels_title='Un titulo que quiera mostrar',
apikey='API KEY';

$.ajax({
    url: 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=' + channels_name + '&key=' + apikey,
    crossDomain: true,
    dataType: 'json'
}).done(function(a) {
    var b = a.items[0].contentDetails.relatedPlaylists.uploads,
        chid = a.items[0].id,
        nekpag = '';
    youtube_video_list(b, apikey, nekpag, channels_title, chid, channels_name)
});

function youtube_video_list(f, g, h, j, k, l) {
    $.ajax({
        url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' + f + '&key=' + g + '&pageToken=' + h,
        dataType: 'json'
    }).done(function(c) {
        var d = '';
        /*
        d += '<div class="ibacordotcom-vid-top"><span class="ibacordotcom-nav-title">' + j + '</span><br><span class="ibacordotcom-vid-by">por <a href="https://www.youtube.com/user/' + l + '" target="_BLANK">' + l + '</a></span><hr>';
        */
        d += 'Selecciona otro video para visualizarlo:<br>';
        d += '<i class="fa fa-fast-backward ibacordotcom_vid_prev" title="Videos anteriores"></i> ';
        d += '<i class="fa fa-fast-forward ibacordotcom_vid_next" title="Siguientes videos"></i></div><div class="ibacordotcom-vid-bottom">';
        $.each(c.items, function(i, a) {
            var b = c.items[i].snippet.resourceId.videoId;
            getwaktu(b, i, g);
            d += '<div class="col-md-2">'
            d += '<a href="#">'
            d += '<div class="ibacordotcom-play" data-vvv="' + b + '"><div class="ibacordotcom_youtube_thumb"><img src="' + c.items[i].snippet.thumbnails.default.url + '" alt="ibacor" class="preViewTube"><span class="ibacordotcom-vid-tm' + i + '"></span></div>';
            d += c.items[i].snippet.title + '</div>'
            d += '</a>'
            d += '</div>'
        });
        d += '</div>';
        $('.ibacordotcom_youtube_channels').html(d);
        if (c.prevPageToken == null) {
            var e = $(".ibacordotcom-play").attr("data-vvv");
            youtube_det(e, k, l, g)
        }
        if (c.prevPageToken != null) {
            $('.ibacordotcom_vid_prev').click(function() {
                var a = c.prevPageToken;
                youtube_video_list(f, g, a, j, k, l);
                return false
            })
        }
        $('.ibacordotcom_vid_next').click(function() {
            var a = c.nextPageToken;
            youtube_video_list(f, g, a, j, k, l);
            return false
        });
        $(".ibacordotcom-play").each(function() {
            $(this).click(function() {
                var a = $(this).attr("data-vvv");
                $('div').removeClass('ibacordotcom-vid-active');
                $(this).addClass('ibacordotcom-vid-active');
                youtube_det(a, k, l, g);
                return false
            })
        })
    })
}

function youtube_det(c, d, e, g) {
    $.ajax({
        url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=snippet,statistics',
        dataType: 'json'
    }).done(function(a) {
        var b = '',
            viewc = a.items[0].statistics.viewCount,
            likc = a.items[0].statistics.likeCount,
            likd = a.items[0].statistics.dislikeCount,
            category = '',
            judul = a.items[0].snippet.localized.title,
            desc = a.items[0].snippet.localized.description;
        b += 'Ultimo Video subido:<br>';
        b += '<div class="embed-responsive embed-responsive-4by3">'
        b += '<iframe src="https://www.youtube.com/embed/' + c + '" allowfullscreen="true" width="100%" height="30%" frameborder="0" class="embed-responsive-item"></iframe>';
        b += '</div>';
        b += '<div class="ibacordotcom-vid-box"><h3>' + judul + '</h3><hr>';
        /*
        b += '<div class="ibacordotcom-vid-box-user"><a href="https://www.youtube.com/channel/' + d + '" target="_BLANK"><span id="ibacordotcom-user-img"></span> <span class="ibacordotcom-uploader">' + a.items[0].snippet.channelTitle + '</span></a><h4 class="pull-right"> ' + addCommas(viewc) + '</h4></div></div>';
        b += '<div class="ibacordotcom-vid-box"><i class="fa fa-clock-o"> <span>' + _timeSince(new Date(a.items[0].snippet.publishedAt).getTime()) + '</span></i><i class="fa fa-thumbs-down pull-right"> ' + addCommas(likd) + '</i><i class="fa fa-thumbs-up pull-right"> ' + addCommas(likc) + '</i><hr>' + urlify(desc).replace(/\n/g, '<br>') + '<br></div>';
        gplus(e, g);
        */
        $('.ibacordotcom_vid_play').html(b)
    })
}

function getwaktu(c, i, g) {
    $.ajax({
        url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=contentDetails',
        dataType: 'json'
    }).done(function(a) {
        var b = a.items[0].contentDetails.duration,
            dataw = '',
            menit = '',
            detik = '';
		if(b.match(/M/g)){
            dataw = b.split('M');
            menit = dataw[0].replace('PT','');
			if(dataw[1] != ''){
				detik = dataw[1].replace('S','');
			}else{
				detik = '00';
			}
		}else{
            dataw = b.split('PT');
			menit = '00';
			detik = dataw[1].replace('S','');
		}
        $('.ibacordotcom-vid-tm' + i).html(menit + ':' + detik)
    })
}

function urlify(b) {
    var c = /(https?:\/\/[^\s]+)/g;
    return b.replace(c, function(a) {
        return '<a href="' + a + '" rel="nofollow" target="_BLANK">' + a + '</a>'
    })
}

function gplus(c, g) {
    var d = 'https://www.googleapis.com/plus/v1/people/',
        apiend = '/activities/public',
        fields = 'items(actor(image(url)))';
    $.ajax({
        url: d + '+' + c + apiend + '?key=' + g + '&fields=' + fields + '&maxResults=1',
        crossDomain: true,
        dataType: 'jsonp'
    }).done(function(a) {
        var b = a.items,
            i = 0,
            html = '';
        for (i = 0; i < b.length; i += 1) {
            html += '<img src="' + b[i].actor.image.url + '" alt="" />'
        }
        $('#ibacordotcom-user-img').html(html)
    })
}

function _timeSince(a) {
    var s = Math.floor((new Date() - a) / 1000),
        i = Math.floor(s / 31536000);
    if (i > 1) {
        return i + " years ago"
    }
    i = Math.floor(s / 2592000);
    if (i > 1) {
        return i + " months ago"
    }
    i = Math.floor(s / 86400);
    if (i > 1) {
        return i + " days ago"
    }
    i = Math.floor(s / 3600);
    if (i > 1) {
        return i + " hours ago"
    }
    i = Math.floor(s / 60);
    if (i > 1) {
        return i + " minutes ago"
    }
    return Math.floor(s) + " seconds ago"
}

function addCommas(nStr){
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

var channels_name='GoogleDevelopers', // Solo la parte del nombre de mi canal, Ejemplo: --> https://www.youtube.com/user/GoogleDevelopers

channels_title='Un titulo que quiera mostrar',

apikey='API KEY';

$.ajax({

url: 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=' + channels_name + '&key=' + apikey,

crossDomain: true,

dataType: 'json'

}).done(function(a) {

var b = a.items[0].contentDetails.relatedPlaylists.uploads,

chid = a.items[0].id,

nekpag = '';

youtube_video_list(b, apikey, nekpag, channels_title, chid, channels_name)

});

function youtube_video_list(f, g, h, j, k, l) {

$.ajax({

url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' + f + '&key=' + g + '&pageToken=' + h,

dataType: 'json'

}).done(function(c) {

var d = '';

d += '<div class="ibacordotcom-vid-top"><span class="ibacordotcom-nav-title">' + j + '</span><br><span class="ibacordotcom-vid-by">por <a href="https://www.youtube.com/user/' + l + '" target="_BLANK">' + l + '</a></span><hr>';

d += 'Selecciona otro video para visualizarlo:<br>';

d += '<i class="fa fa-fast-backward ibacordotcom_vid_prev" title="Videos anteriores"></i> ';

d += '<i class="fa fa-fast-forward ibacordotcom_vid_next" title="Siguientes videos"></i></div><div class="ibacordotcom-vid-bottom">';

$.each(c.items, function(i, a) {

var b = c.items[i].snippet.resourceId.videoId;

getwaktu(b, i, g);

d += '<div class="col-md-2">'

d += '<a href="#">'

d += '<div class="ibacordotcom-play" data-vvv="' + b + '"><div class="ibacordotcom_youtube_thumb"><img src="' + c.items[i].snippet.thumbnails.default.url + '" alt="ibacor" class="preViewTube"><span class="ibacordotcom-vid-tm' + i + '"></span></div>';

d += c.items[i].snippet.title + '</div>'

d += '</a>'

d += '</div>'

});

d += '</div>';

$('.ibacordotcom_youtube_channels').html(d);

if (c.prevPageToken == null) {

var e = $(".ibacordotcom-play").attr("data-vvv");

youtube_det(e, k, l, g)

}

if (c.prevPageToken != null) {

$('.ibacordotcom_vid_prev').click(function() {

var a = c.prevPageToken;

youtube_video_list(f, g, a, j, k, l);

return false

})

}

$('.ibacordotcom_vid_next').click(function() {

var a = c.nextPageToken;

youtube_video_list(f, g, a, j, k, l);

return false

});

$(".ibacordotcom-play").each(function() {

$(this).click(function() {

var a = $(this).attr("data-vvv");

$('div').removeClass('ibacordotcom-vid-active');

$(this).addClass('ibacordotcom-vid-active');

youtube_det(a, k, l, g);

return false

})

}

function youtube_det(c, d, e, g) {

$.ajax({

url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=snippet,statistics',

dataType: 'json'

}).done(function(a) {

var b = '',

viewc = a.items[0].statistics.viewCount,

likc = a.items[0].statistics.likeCount,

likd = a.items[0].statistics.dislikeCount,

category = '',

judul = a.items[0].snippet.localized.title,

desc = a.items[0].snippet.localized.description;

b += 'Ultimo Video subido:<br>';

b += '<div class="embed-responsive embed-responsive-4by3">'

b += '<iframe src="https://www.youtube.com/embed/' + c + '" allowfullscreen="true" width="100%" height="30%" frameborder="0" class="embed-responsive-item"></iframe>';

b += '</div>';

b += '<div class="ibacordotcom-vid-box"><h3>' + judul + '</h3><hr>';

b += '<div class="ibacordotcom-vid-box-user"><a href="https://www.youtube.com/channel/' + d + '" target="_BLANK"><span id="ibacordotcom-user-img"></span> <span class="ibacordotcom-uploader">' + a.items[0].snippet.channelTitle + '</span></a><h4 class="pull-right"> ' + addCommas(viewc) + '</h4></div></div>';

b += '<div class="ibacordotcom-vid-box"><i class="fa fa-clock-o"> <span>' + _timeSince(new Date(a.items[0].snippet.publishedAt).getTime()) + '</span></i><i class="fa fa-thumbs-down pull-right"> ' + addCommas(likd) + '</i><i class="fa fa-thumbs-up pull-right"> ' + addCommas(likc) + '</i><hr>' + urlify(desc).replace(/\n/g, '<br>') + '<br></div>';

gplus(e, g);

$('.ibacordotcom_vid_play').html(b)

})

}

function getwaktu(c, i, g) {

$.ajax({

url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=contentDetails',

dataType: 'json'

}).done(function(a) {

var b = a.items[0].contentDetails.duration,

dataw = '',

menit = '',

detik = '';

if(b.match(/M/g)){

dataw = b.split('M');

menit = dataw[0].replace('PT','');

if(dataw[1] != ''){

detik = dataw[1].replace('S','');

}else{

detik = '00';

}

}else{

dataw = b.split('PT');

menit = '00';

detik = dataw[1].replace('S','');

}

$('.ibacordotcom-vid-tm' + i).html(menit + ':' + detik)

})

}

function urlify(b) {

var c = /(https?:\/\/[^\s]+)/g;

return b.replace(c, function(a) {

return '<a href="' + a + '" rel="nofollow" target="_BLANK">' + a + '</a>'

})

}

function gplus(c, g) {

var d = 'https://www.googleapis.com/plus/v1/people/',

apiend = '/activities/public',

fields = 'items(actor(image(url)))';

$.ajax({

url: d + '+' + c + apiend + '?key=' + g + '&fields=' + fields + '&maxResults=1',

crossDomain: true,

dataType: 'jsonp'

}).done(function(a) {

var b = a.items,

i = 0,

html = '';

for (i = 0; i < b.length; i += 1) {

html += '<img src="' + b[i].actor.image.url + '" alt="" />'

}

$('#ibacordotcom-user-img').html(html)

})

}

function _timeSince(a) {

var s = Math.floor((new Date() - a) / 1000),

i = Math.floor(s / 31536000);

if (i > 1) {

return i + " years ago"

}

i = Math.floor(s / 2592000);

if (i > 1) {

return i + " months ago"

}

i = Math.floor(s / 86400);

if (i > 1) {

return i + " days ago"

}

i = Math.floor(s / 3600);

if (i > 1) {

return i + " hours ago"

}

i = Math.floor(s / 60);

if (i > 1) {

return i + " minutes ago"

}

return Math.floor(s) + " seconds ago"

}

function addCommas(nStr){

nStr += '';

x = nStr.split('.');

x1 = x[0];

x2 = x.length > 1 ? '.' + x[1] : '';

var rgx = /(\d+)(\d{3})/;

while (rgx.test(x1)) {

x1 = x1.replace(rgx, '$1' + ',' + '$2');

}

return x1 + x2;

}

Ahora creamos nuestra Vista para visualizar los resultados:

index.html


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
		
		<title>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap</title>

		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

		<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

		<script src="script.js"></script>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	</head>
	<body>
		<div class="container">

			<h1>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap.</h1>

			    <div class="row">


					<div id="ibacordotcom-content">						
						<div class="ibacordotcom-unit ibacordotcom-vid-kenca">
							<div class="ibacordotcom_vid_play"></div>
						</div>
						<div class = "ibacordotcom-unit ibacordotcom-vid-katuhu">
							<div class="ibacordotcom_youtube_channels"></div>
						</div>
					</div>

				</div>

		</div>


		<br><br>		

				
			<footer>
				<div class="container text-center">
					<p class="text-muted credit">
						Desarrollado por <a href="https://www.collectivecloudperu.com" target="blank">Collective Cloud Peru</a>
					</p>
			  	</div>				
			</footer>


	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap</title>

</head>

<body>

<h1>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap.</h1>

</div>

</div>

Desarrollado por <a href="https://www.collectivecloudperu.com" target="blank">Collective Cloud Peru</a>

</p>

</div>

</footer>

</body>

</html>

Listo eso es todo

Notas

Puedes ver la Demo que esta al inicio de este tutorial
Las funciones de jQuery que usamos en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a jQuery.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Subscribirse

3 Comments

antiguos

nuevos más votado

Inline Feedbacks

View all comments

Makindu Macloy

6 años atrás

Me ha servido muchisimo. Te agradezco.

Una pregunta ¿como hacer para que se muestren mas de 5 videos en los pequeños?

Responder

Collective Cloud Peru

Reply to Makindu Macloy

6 años atrás

El sistema muestra todo los videos, ordenados de recientes a antiguos, solo tienes que navegar con los botones:

Responder

Collective Cloud Peru

Reply to Makindu Macloy

6 años atrás

Solo tienes que tocar el CSS y Bootstrap, dale mas alto y despliega mas de 1 fila en tu pagina. Saludos y Gracias por visitar el Blog estimado @makindumacloy:disqus

Responder

← Post Anterior Siguiente Post →

Mostrar Videos de mi Canal de Youtube mediante la API v3 y jQuery.

Demo Github

script.js

index.html

Notas

Partners

Redes Sociales (Developers)

Redes Sociales (Digital)

Post Actualizados / Corregidos

Código QR (De Esta Página)

script.js

index.html

Notas

Artículos Relacionados

Partners

Redes Sociales (Developers)

Redes Sociales (Digital)

Post Actualizados / Corregidos

Código QR (De Esta Página)