{"id":658,"date":"2026-10-30T22:26:05","date_gmt":"2026-10-31T01:26:05","guid":{"rendered":"https:\/\/d3fa.opik.net\/?page_id=658"},"modified":"2026-10-30T22:52:53","modified_gmt":"2026-10-31T01:52:53","slug":"elementor-pagina-658","status":"publish","type":"page","link":"https:\/\/d3fa.opik.net\/?page_id=658","title":{"rendered":"Videos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"658\" class=\"elementor elementor-658\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e52f53 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e52f53\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9117c04\" data-id=\"9117c04\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eaf6480 elementor-widget elementor-widget-html\" data-id=\"eaf6480\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========================================\r\n     SECCI\u00d3N DE VIDEOS RECIENTES (DEFA)\r\n     ========================================== -->\r\n<div class=\"defa-recent-videos-section\" id=\"videos\">\r\n  <div class=\"defa-section-header\">\r\n    <h2>VIDEOS RECIENTES<\/h2>\r\n    <p>\u00daltimos lanzamientos y videoclips oficiales<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"defa-player-container\">\r\n    <!-- Contenedor del video de YouTube -->\r\n    <div class=\"video-frame-box\">\r\n      <div id=\"youtube-player-recent\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Barra de controles y t\u00edtulo interactivo -->\r\n    <div class=\"defa-player-controls\">\r\n      <div class=\"current-track-info\">\r\n        <span class=\"status-dot\"><\/span>\r\n        <span id=\"recent-video-title\">Cargando videoclip...<\/span>\r\n      <\/div>\r\n\r\n      <button class=\"player-btn-random\" onclick=\"playNextRecentVideo()\" title=\"Reproducir otro video al azar\">\r\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\">\r\n          <path d=\"M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.45 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z\"\/>\r\n        <\/svg>\r\n        <span>SIGUIENTE VIDEO ALEATORIO<\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ==========================================\r\n     ESTILOS CSS (GLASSMORPHISM)\r\n     ========================================== -->\r\n<style>\r\n  .defa-recent-videos-section {\r\n    width: 100%;\r\n    max-width: 900px;\r\n    margin: 40px auto;\r\n    padding: 0 20px;\r\n    box-sizing: border-box;\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n  }\r\n\r\n  .defa-section-header {\r\n    text-align: center;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .defa-section-header h2 {\r\n    color: #ffffff;\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    letter-spacing: 3px;\r\n    margin: 0 0 6px 0;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .defa-section-header p {\r\n    color: #9999aa;\r\n    font-size: 13px;\r\n    letter-spacing: 1px;\r\n    margin: 0;\r\n  }\r\n\r\n  .defa-player-container {\r\n    background-color: rgba(15, 15, 20, 0.6);\r\n    backdrop-filter: blur(18px);\r\n    -webkit-backdrop-filter: blur(18px);\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  .video-frame-box {\r\n    position: relative;\r\n    width: 100%;\r\n    padding-bottom: 56.25%; \/* Relaci\u00f3n de aspecto 16:9 *\/\r\n    background: #000;\r\n  }\r\n\r\n  .video-frame-box iframe {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: none;\r\n  }\r\n\r\n  .defa-player-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 16px 24px;\r\n    background-color: rgba(10, 10, 15, 0.85);\r\n    border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .player-btn-random {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background-color: rgba(255, 255, 255, 0.1);\r\n    color: #ffffff;\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    padding: 12px 20px;\r\n    border-radius: 8px;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.5px;\r\n    cursor: pointer;\r\n    transition: all 0.25s ease;\r\n  }\r\n\r\n  .player-btn-random:hover {\r\n    background-color: rgba(255, 255, 255, 0.25);\r\n    border-color: rgba(255, 255, 255, 0.45);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .current-track-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: #cccccc;\r\n    font-size: 13px;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .status-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: #ff0000;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px #ff0000;\r\n    animation: pulse-dot 1.5s infinite;\r\n  }\r\n\r\n  @keyframes pulse-dot {\r\n    0% { opacity: 1; }\r\n    50% { opacity: 0.4; }\r\n    100% { opacity: 1; }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .defa-player-controls {\r\n      flex-direction: column;\r\n      gap: 14px;\r\n      text-align: center;\r\n    }\r\n    .player-btn-random {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n     L\u00d3GICA JAVASCRIPT (REPRODUCTOR YOUTUBE)\r\n     ========================================== -->\r\n<script>\r\n  \/\/ Lista de videos recientes de tu canal (@DEFAOFICIAL)\r\n  \/\/ El primer video configurado es el que me acabas de enviar (pefURaDRzCc)\r\n  const recentVideosList = [\r\n    { id: 'pefURaDRzCc', title: 'DEFA - Estreno Reciente' },\r\n    { id: '3JZ_D3ELwOQ', title: 'DEFA - Videoclip 2' },\r\n    { id: 'dQw4w9WgXcQ', title: 'DEFA - Videoclip 3' }\r\n  ];\r\n\r\n  let currentRecentIndex = 0;\r\n  let recentPlayer;\r\n\r\n  function getRandomRecentIndex() {\r\n    if (recentVideosList.length <= 1) return 0;\r\n    let newIndex;\r\n    do {\r\n      newIndex = Math.floor(Math.random() * recentVideosList.length);\r\n    } while (newIndex === currentRecentIndex);\r\n    return newIndex;\r\n  }\r\n\r\n  if (!window.YT) {\r\n    var tag = document.createElement('script');\r\n    tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\n    var firstScriptTag = document.getElementsByTagName('script')[0];\r\n    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n  }\r\n\r\n  \/\/ Si la API ya carg\u00f3 previamente en la p\u00e1gina, inicializamos de inmediato\r\n  if (window.YT && window.YT.Player) {\r\n    initRecentPlayer();\r\n  }\r\n\r\n  function onYouTubeIframeAPIReady() {\r\n    initRecentPlayer();\r\n  }\r\n\r\n  function initRecentPlayer() {\r\n    if (document.getElementById('youtube-player-recent') && !recentPlayer) {\r\n      recentPlayer = new YT.Player('youtube-player-recent', {\r\n        height: '100%',\r\n        width: '100%',\r\n        videoId: recentVideosList[0].id,\r\n        playerVars: {\r\n          'playsinline': 1,\r\n          'autoplay': 0,\r\n          'rel': 0\r\n        },\r\n        events: {\r\n          'onReady': function() {\r\n            updateRecentTitle();\r\n          }\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  function playNextRecentVideo() {\r\n    currentRecentIndex = getRandomRecentIndex();\r\n    if (recentPlayer && recentPlayer.loadVideoById) {\r\n      recentPlayer.loadVideoById(recentVideosList[currentRecentIndex].id);\r\n      updateRecentTitle();\r\n    }\r\n  }\r\n\r\n  function updateRecentTitle() {\r\n    const titleElement = document.getElementById('recent-video-title');\r\n    if (titleElement) {\r\n      titleElement.innerText = recentVideosList[currentRecentIndex].title;\r\n    }\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-90f6299 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"90f6299\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e028443\" data-id=\"e028443\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8526444 elementor-widget elementor-widget-html\" data-id=\"8526444\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========================================\r\n     1. ESTRUCTURA HTML (LOGO Y MEN\u00da)\r\n     ========================================== -->\r\n<!-- Logo con imagen fija arriba a la izquierda (redirige al inicio) -->\r\n<a href=\"https:\/\/d3fa.opik.net\/\" id=\"site-logo\">\r\n  <img decoding=\"async\" src=\"https:\/\/d3fa.opik.net\/wp-content\/uploads\/2026\/10\/DEFA-PNG-2-300x143.png\" alt=\"Logo\">\r\n<\/a>\r\n\r\n<!-- Bot\u00f3n para abrir\/cerrar el men\u00fa (arriba a la derecha) -->\r\n<button id=\"toggle-btn\" onclick=\"toggleMenu()\">\u2630 Men\u00fa<\/button>\r\n\r\n<!-- Panel lateral (Sidebar a la derecha) -->\r\n<nav id=\"sidebar\" class=\"sidebar\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Navegaci\u00f3n<\/h3>\r\n    <button class=\"close-btn\" onclick=\"toggleMenu()\">&times;<\/button>\r\n  <\/div>\r\n  <ul class=\"sidebar-links\">\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/\" onclick=\"toggleMenu()\">Inicio<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=528\" onclick=\"toggleMenu()\">M\u00fasica<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=658\" onclick=\"toggleMenu()\">Videos<\/a><\/li>\r\n    <!-- Opci\u00f3n Beats con su enlace independiente configurado -->\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=548\" onclick=\"toggleMenu()\">Beats<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=531\" onclick=\"toggleMenu()\">Sobre m\u00ed<\/a><\/li>\r\n    <li><a href=\"https:\/\/d3fa.opik.net\/?page_id=583\" onclick=\"toggleMenu()\">Contacto<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n\r\n<!-- Capa oscura de fondo al abrir el men\u00fa -->\r\n<div id=\"overlay\" onclick=\"toggleMenu()\"><\/div>\r\n\r\n\r\n<!-- ==========================================\r\n     2. ESTILOS CSS\r\n     ========================================== -->\r\n<style>\r\n  \/* Desplazamiento suave global *\/\r\n  html {\r\n    scroll-behavior: smooth;\r\n  }\r\n\r\n  \/* LOGO SIN CUADRO Y M\u00c1S GRANDE *\/\r\n  #site-logo {\r\n    position: fixed;\r\n    top: 20px;\r\n    left: 20px;\r\n    z-index: 99999;\r\n    display: flex;\r\n    align-items: center;\r\n    background-color: transparent;\r\n    backdrop-filter: none;\r\n    -webkit-backdrop-filter: none;\r\n    padding: 0;\r\n    border: none;\r\n    box-shadow: none;\r\n    text-decoration: none;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n\r\n  #site-logo:hover {\r\n    opacity: 0.8;\r\n  }\r\n\r\n  \/* Tama\u00f1o de la imagen del logo a 60px *\/\r\n  #site-logo img {\r\n    height: 60px; \r\n    width: auto;\r\n    display: block;\r\n  }\r\n\r\n  \/* Bot\u00f3n flotante para abrir el men\u00fa (arriba a la derecha) *\/\r\n  #toggle-btn {\r\n    position: fixed;\r\n    top: 20px;\r\n    right: 20px;\r\n    z-index: 99999;\r\n    padding: 10px 18px;\r\n    background-color: rgba(20, 20, 25, 0.4);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    color: #ffffff;\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  #toggle-btn:hover {\r\n    background-color: rgba(30, 30, 40, 0.6);\r\n  }\r\n\r\n  \/* Panel lateral desplegable *\/\r\n  .sidebar {\r\n    position: fixed;\r\n    top: 0;\r\n    right: -280px;\r\n    left: auto;\r\n    width: 260px;\r\n    height: 100vh;\r\n    background-color: rgba(15, 15, 20, 0.35);\r\n    backdrop-filter: blur(15px);\r\n    -webkit-backdrop-filter: blur(15px);\r\n    color: #ffffff;\r\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);\r\n    transition: right 0.3s ease-in-out;\r\n    z-index: 100000;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n    border-left: 1px solid rgba(255, 255, 255, 0.12);\r\n  }\r\n\r\n  .sidebar.active {\r\n    right: 0;\r\n  }\r\n\r\n  .sidebar-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.15);\r\n    padding-bottom: 15px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .sidebar-header h3 {\r\n    margin: 0;\r\n    color: #fff;\r\n    font-size: 20px;\r\n  }\r\n\r\n  .close-btn {\r\n    background: none;\r\n    border: none;\r\n    color: #ccc;\r\n    font-size: 28px;\r\n    cursor: pointer;\r\n    line-height: 1;\r\n    transition: color 0.2s;\r\n  }\r\n\r\n  .close-btn:hover {\r\n    color: #fff;\r\n  }\r\n\r\n  .sidebar-links {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .sidebar-links li {\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .sidebar-links a {\r\n    color: #ddd;\r\n    text-decoration: none;\r\n    font-size: 16px;\r\n    display: block;\r\n    padding: 10px 14px;\r\n    border-radius: 6px;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .sidebar-links a:hover {\r\n    background-color: rgba(255, 255, 255, 0.15);\r\n    color: #ffffff;\r\n    padding-left: 18px;\r\n  }\r\n\r\n  #overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    display: none;\r\n    z-index: 99998;\r\n    backdrop-filter: blur(2px);\r\n  }\r\n\r\n  #overlay.active {\r\n    display: block;\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n     3. L\u00d3GICA JAVASCRIPT\r\n     ========================================== -->\r\n<script>\r\n  function toggleMenu() {\r\n    const sidebar = document.getElementById('sidebar');\r\n    const overlay = document.getElementById('overlay');\r\n    \r\n    sidebar.classList.toggle('active');\r\n    overlay.classList.toggle('active');\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VIDEOS RECIENTES \u00daltimos lanzamientos y videoclips oficiales Cargando videoclip&#8230; SIGUIENTE VIDEO ALEATORIO \u2630 Men\u00fa Navegaci\u00f3n &times; Inicio M\u00fasica Videos Beats Sobre m\u00ed Contacto<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-658","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=658"}],"version-history":[{"count":11,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/658\/revisions"}],"predecessor-version":[{"id":709,"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=\/wp\/v2\/pages\/658\/revisions\/709"}],"wp:attachment":[{"href":"https:\/\/d3fa.opik.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}