{"id":1070,"date":"2026-06-12T17:31:19","date_gmt":"2026-06-12T17:31:19","guid":{"rendered":"https:\/\/dipgis.umsa.bo\/interaccion_social\/?page_id=1070"},"modified":"2026-06-12T17:31:20","modified_gmt":"2026-06-12T17:31:20","slug":"videos-suyana","status":"publish","type":"page","link":"https:\/\/dipgis.umsa.bo\/interaccion_social\/videos-suyana\/","title":{"rendered":"Videos &#8211; SUYANA"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ===================================================== *\/\n\/* CSS: GALER\u00cdA DE VIDEOS DIN\u00c1MICA                       *\/\n\/* ===================================================== *\/\n\n:root {\n    --suyana-primary: #00422c;\n    --suyana-light: #007a5e;\n    --suyana-accent: #eab308;\n    --text-dark: #1e293b;\n    --text-muted: #475569;\n    --bg-page: #ffffff;\n    --bg-surface: #f8fafc;\n    --border-color: #e2e8f0;\n    --radius-lg: 16px;\n    --radius-sm: 8px;\n    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n#suyana-videos-container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 2rem 1rem;\n    font-family: 'Inter', sans-serif;\n    color: var(--text-dark);\n}\n\n\/* Encabezado *\/\n.video-header {\n    text-align: center;\n    margin-bottom: 3rem;\n}\n\n.video-header h2 {\n    font-family: 'Merriweather', serif;\n    color: var(--suyana-primary);\n    font-size: clamp(2rem, 4vw, 2.5rem);\n    margin-bottom: 0.5rem;\n}\n\n.video-header p {\n    color: var(--text-muted);\n    font-size: 1.1rem;\n    max-width: 600px;\n    margin: 0 auto;\n}\n\n\/* Reproductor Principal *\/\n.featured-video-wrapper {\n    background: var(--bg-surface);\n    padding: 1rem;\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-sm);\n    margin-bottom: 3rem;\n    border: 1px solid var(--border-color);\n}\n\n.video-responsive {\n    position: relative;\n    padding-bottom: 56.25%;\n    \/* Relaci\u00f3n de aspecto 16:9 *\/\n    height: 0;\n    overflow: hidden;\n    border-radius: var(--radius-sm);\n    background: #000;\n}\n\n.video-responsive iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n.featured-title {\n    margin: 1rem 0 0.5rem;\n    font-size: 1.25rem;\n    color: var(--suyana-primary);\n    font-weight: 600;\n}\n\n\/* Mensajes de Estado *\/\n.status-message {\n    text-align: center;\n    padding: 2rem;\n    color: var(--text-muted);\n    font-size: 1.1rem;\n}\n\n.error-message {\n    color: #ef4444;\n    background: #fef2f2;\n    border-radius: var(--radius-sm);\n    border: 1px solid #fca5a5;\n}\n\n\/* Cuadr\u00edcula de Videos (Grid) *\/\n.videos-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 1.5rem;\n}\n\n\/* Tarjetas de Video *\/\n.video-card {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    cursor: pointer;\n    transition: var(--transition);\n    display: flex;\n    flex-direction: column;\n}\n\n.video-card:hover {\n    transform: translateY(-5px);\n    box-shadow: var(--shadow-hover);\n    border-color: var(--suyana-light);\n}\n\n.thumbnail-wrapper {\n    position: relative;\n    aspect-ratio: 16 \/ 9;\n    overflow: hidden;\n    background: #000;\n}\n\n.thumbnail-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: var(--transition);\n    opacity: 0.9;\n}\n\n.video-card:hover .thumbnail-wrapper img {\n    transform: scale(1.05);\n    opacity: 0.7;\n}\n\n\/* Icono de Play Superpuesto *\/\n.play-icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 50px;\n    height: 50px;\n    background: rgba(0, 66, 44, 0.8);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: var(--transition);\n}\n\n.play-icon::after {\n    content: \"\";\n    border-style: solid;\n    border-width: 10px 0 10px 16px;\n    border-color: transparent transparent transparent #fff;\n    margin-left: 4px;\n}\n\n.video-card:hover .play-icon {\n    opacity: 1;\n    background: var(--suyana-accent);\n}\n\n.video-info {\n    padding: 1rem;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.video-title {\n    font-size: 1rem;\n    font-weight: 600;\n    color: var(--text-dark);\n    margin: 0 0 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    line-height: 1.4;\n    transition: color 0.2s;\n}\n\n.video-card:hover .video-title {\n    color: var(--suyana-primary);\n}\n\n\/* Resaltar video actualmente en reproducci\u00f3n en el Grid *\/\n.video-card.active-video {\n    border-color: var(--suyana-accent);\n    box-shadow: 0 0 0 2px var(--suyana-accent);\n}\n\n.video-card.active-video .play-icon {\n    opacity: 1;\n    background: var(--suyana-primary);\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n    \/\/ ==========================================\n    \/\/ \u2699\ufe0f CONFIGURACI\u00d3N DE LA API (Modifica aqu\u00ed)\n    \/\/ ==========================================\n    const API_KEY = 'AIzaSyBHb_3mHy9wUC2RabLRBKHu3OoFuJnnexQ';\n    const PLAYLIST_ID = 'PLUZagjVWXzuva-tu7w-X78QVogkkN5uJQ';\n\n    \/\/ ==========================================\n\n    const URL_API = `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&maxResults=50&playlistId=${PLAYLIST_ID}&key=${API_KEY}`;\n\n    \/\/ Elementos del DOM\n    const gridContainer = document.getElementById('videos-grid');\n    const mainPlayer = document.getElementById('main-player');\n    const mainVideoTitle = document.getElementById('main-video-title');\n    const spinner = document.getElementById('loading-spinner');\n    const errorMessage = document.getElementById('error-message');\n    const featuredSection = document.getElementById('featured-video-section');\n\n    let videosData = [];\n\n    \/\/ 1. Obtener videos de la API de YouTube\n    async function fetchVideos() {\n        try {\n            const response = await fetch(URL_API);\n            if (!response.ok) throw new Error('Error al obtener la lista de reproducci\u00f3n.');\n\n            const data = await response.json();\n\n            \/\/ Filtrar videos privados o eliminados\n            videosData = data.items.filter(item =>\n                item.snippet.title !== 'Private video' &&\n                item.snippet.title !== 'Deleted video'\n            );\n\n            if (videosData.length === 0) {\n                showError(\"La lista de reproducci\u00f3n est\u00e1 vac\u00eda.\");\n                return;\n            }\n\n            spinner.style.display = 'none';\n            featuredSection.style.display = 'block';\n\n            buildGrid(videosData);\n\n            \/\/ Cargar el primer video autom\u00e1ticamente en el reproductor\n            playVideo(videosData[0].snippet.resourceId.videoId, videosData[0].snippet.title, 0);\n\n        } catch (error) {\n            console.error(error);\n            showError(\"No se pudieron cargar los videos. Verifica la API Key y el ID de la Playlist.\");\n        }\n    }\n\n    \/\/ 2. Construir la Cuadr\u00edcula de Miniaturas\n    function buildGrid(videos) {\n        gridContainer.innerHTML = ''; \/\/ Limpiar grilla\n\n        videos.forEach((video, index) => {\n            const videoId = video.snippet.resourceId.videoId;\n            const title = video.snippet.title;\n            \/\/ Obtener la mejor resoluci\u00f3n de miniatura disponible\n            const thumbnails = video.snippet.thumbnails;\n            const thumbUrl = thumbnails.maxres?.url || thumbnails.high?.url || thumbnails.medium?.url || thumbnails.default?.url;\n\n            \/\/ Crear Tarjeta\n            const card = document.createElement('article');\n            card.classList.add('video-card');\n            card.dataset.index = index; \/\/ Para identificar el video activo\n            card.setAttribute('role', 'button');\n            card.setAttribute('tabindex', '0');\n            card.setAttribute('aria-label', `Reproducir video: ${title}`);\n\n            card.innerHTML = `\n                <div class=\"thumbnail-wrapper\">\n                    <img decoding=\"async\" src=\"${thumbUrl}\" alt=\"Miniatura de ${title}\" loading=\"lazy\">\n                    <div class=\"play-icon\"><\/div>\n                <\/div>\n                <div class=\"video-info\">\n                    <h3 class=\"video-title\">${title}<\/h3>\n                <\/div>\n            `;\n\n            \/\/ Evento Click\n            card.addEventListener('click', () => {\n                playVideo(videoId, title, index);\n                scrollToPlayer();\n            });\n\n            \/\/ Accesibilidad para teclado (Enter)\n            card.addEventListener('keypress', (e) => {\n                if (e.key === 'Enter') {\n                    playVideo(videoId, title, index);\n                    scrollToPlayer();\n                }\n            });\n\n            gridContainer.appendChild(card);\n        });\n    }\n\n    \/\/ 3. Reproducir el Video Seleccionado\n    function playVideo(videoId, title, index) {\n        \/\/ Actualizar Iframe (Se a\u00f1ade autoplay=1 para que inicie al hacer clic en un cuadro)\n        mainPlayer.src = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`;\n        mainVideoTitle.textContent = title;\n\n        \/\/ Actualizar estilos visuales (clase active-video)\n        const allCards = document.querySelectorAll('.video-card');\n        allCards.forEach(card => card.classList.remove('active-video'));\n\n        const activeCard = document.querySelector(`.video-card[data-index=\"${index}\"]`);\n        if (activeCard) activeCard.classList.add('active-video');\n    }\n\n    \/\/ 4. Utilidades\n    function showError(mensaje) {\n        spinner.style.display = 'none';\n        featuredSection.style.display = 'none';\n        errorMessage.textContent = mensaje;\n        errorMessage.hidden = false;\n    }\n\n    function scrollToPlayer() {\n        featuredSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n\n    \/\/ Iniciar\n    fetchVideos();\n});\n<\/script>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&#038;family=Merriweather:wght@700&#038;display=swap\"\n        rel=\"stylesheet\">\n\n  <div id=\"suyana-videos-container\">\n        <header class=\"video-header\">\n            <h2>Suyana &#8211; Videos<\/h2>\n            <p>Conoce m\u00e1s sobre nuestras actividades, campa\u00f1as y testimonios en las comunidades.<\/p>\n        <\/header>\n\n        <section class=\"featured-video-wrapper\" id=\"featured-video-section\" aria-live=\"polite\">\n            <div class=\"video-responsive\">\n                <iframe id=\"main-player\" src=\"\" title=\"Reproductor de Video Principal\" frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen>\n                <\/iframe>\n            <\/div>\n            <h3 id=\"main-video-title\" class=\"featured-title\">Cargando video&#8230;<\/h3>\n        <\/section>\n\n        <div id=\"loading-spinner\" class=\"status-message\">Cargando lista de reproducci\u00f3n&#8230;<\/div>\n        <div id=\"error-message\" class=\"status-message error-message\" hidden>\n            Ocurri\u00f3 un error al cargar los videos. Por favor, intenta nuevamente m\u00e1s tarde.\n        <\/div>\n\n        <section>\n            <div class=\"videos-grid\" id=\"videos-grid\">\n            <\/div>\n        <\/section>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Suyana &#8211; Videos Conoce m\u00e1s sobre nuestras actividades, campa\u00f1as y testimonios en las comunidades. Cargando video&#8230; Cargando lista de reproducci\u00f3n&#8230; Ocurri\u00f3 un error al cargar los videos. Por favor, intenta nuevamente m\u00e1s tarde.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1070","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/1070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/comments?post=1070"}],"version-history":[{"count":1,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/1070\/revisions"}],"predecessor-version":[{"id":1071,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/1070\/revisions\/1071"}],"wp:attachment":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/media?parent=1070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}