https://anapoima-cundinamarca.gov.co/SiteAssets/v1/assets/components/videoYoutube/youtube.js

1// Funcion auxiliar para obtener el playlistId de subidas
2function fetchYouTubeUploadsPlaylistId(channelId, apiKey, callback) {
3	let apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${channelId}&key=${apiKey}`;
4	console.log('Solicitando playlistId de subidas desde:', apiUrl);
5
6	$.get(apiUrl, function (data) {
7		console.log('Datos del canal recibidos:', data);
8		if (data.items.length > 0) {
9			let uploadsPlaylistId = data.items[0].contentDetails.relatedPlaylists.uploads;
10			console.log('Playlist ID de subidas encontrado:', uploadsPlaylistId);
11			callback(uploadsPlaylistId);
12		} else {
13			console.error('No se encontro el canal.');
14		}
15	}).fail(function (jqXHR, textStatus, errorThrown) {
16		console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
17	});
18}
19
20// Funcion auxiliar para obtener los detalles del canal
21function fetchYouTubeChannelDetails(channelId, apiKey, callback) {
22	let apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${apiKey}`;
23	console.log('Solicitando detalles del canal desde:', apiUrl);
24
25	$.get(apiUrl, function (data) {
26		console.log('Detalles del canal recibidos:', data);
27		if (data.items.length > 0) {
28			let channelDetails = data.items[0].statistics;
29			console.log('Detalles del canal encontrados:', channelDetails);
30			callback(channelDetails);
31		} else {
32			console.error('No se encontraron los detalles del canal.');
33		}
34	}).fail(function (jqXHR, textStatus, errorThrown) {
35		console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
36	});
37}
38
39/**
40 * @funcion app run fetchYoutuneVideos
41 *
42 *  */
43function fetchYouTubeVideos() {
44	let channelId = 'UCVGgt9ac2aoTb7FXRxDyChA'; // Asegerate de que no haya un espacio al inicio
45	let apiKey = 'AIzaSyDE35atkWRVQPyGjCt_OSra9brgvE9QJhw'; // Reemplaza con tu clave de API de YouTube
46
47	fetchYouTubeUploadsPlaylistId(channelId, apiKey, function (playlistId) {
48		let apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=1&playlistId=${playlistId}&key=${apiKey}`;
49		console.log('Solicitando videos desde:', apiUrl);
50
51		$.get(apiUrl, function (data) {
52			console.log('Datos recibidos de la API:', data);
53			let strHTML = '';
54			if (data.items.length > 0) {
55				let video = data.items[0];
56				const { description, title } = video.snippet;
57				const { videoId } = video.snippet.resourceId;
58				fetchYouTubeChannelDetails(channelId, apiKey, function (channelDetails) {
59					const { subscriberCount } = channelDetails;
60					strHTML += `
61							<figure class="border-t-8 border-mainColor w-full h-auto">
62  <div class="w-full relative pb-[56.25%]">
63    <iframe
64      class="absolute top-0 left-0 w-full h-full rounded-none"
65      src="https://www.youtube.com/embed/${videoId}"
66      title="${title}"
67      frameborder="0"
68      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
69      allowfullscreen>
70    </iframe>
71  </div>
72</figure>
73
74<div class="text__description w-full px-[20px] py-4 flex flex-col gap-3">
75
76    <!-- Primera fila: título + suscriptores -->
77    <div class="flex justify-between items-center w-full flex-wrap gap-2">
78        
79        <!-- Título -->
80        <h3 class="font-extrabold text-[#22A33E] text-[24px] lg:text-[28px] leading-tight">
81            ${title}
82        </h3>
83
84        <!-- Suscriptores -->
85        <span class="font-semibold text-gray-700 text-sm whitespace-nowrap">
86            ${subscriberCount} suscriptores
87        </span>
88
89    </div>
90
91    <!-- Descripción -->
92    <p class="paragraph text-gray-700 text-[15px] leading-relaxed">
93        ${description}
94    </p>
95
96</div>
97
98
99`;
100
101					$('#contentVideos').html(strHTML);
102					console.log('HTML actualizado con los videos.');
103				});
104			} else {
105				strHTML = '<p>No se encontraron videos.</p>';
106				$('#contentVideos').html(strHTML);
107			}
108		}).fail(function (jqXHR, textStatus, errorThrown) {
109			console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
110		});
111	});
112}
113
114document.addEventListener('DOMContentLoaded', () => {
115	fetchYouTubeVideos();
116});