{"id":7449,"date":"2026-05-14T17:54:02","date_gmt":"2026-05-14T17:54:02","guid":{"rendered":"https:\/\/etchenet.com\/?page_id=7449"},"modified":"2026-05-14T17:54:03","modified_gmt":"2026-05-14T17:54:03","slug":"scroll-video-background","status":"publish","type":"page","link":"https:\/\/etchenet.com\/es\/scroll-video-background\/","title":{"rendered":"fondo de v\u00eddeo desplazable"},"content":{"rendered":"<style>\n\/* =========================================================\n   SCROLL VIDEO BACKGROUND \u2014 Gutenberg landing page\n   Encapsulated CSS: no global reset, no theme\/FSE conflict\n   ========================================================= *\/\n\n.svb-plugin-page {\n  --svb-bg: #020617;\n  --svb-panel: rgba(140, 181, 239, .045);\n  --svb-panel-hover: rgba(140, 181, 239, .09);\n  --svb-border: rgba(140, 181, 239, .14);\n  --svb-border-strong: rgba(140, 181, 239, .42);\n  --svb-text: #ffffff;\n  --svb-muted: rgba(255, 255, 255, .64);\n  --svb-soft: rgba(255, 255, 255, .48);\n  --svb-blue: #8CB5EF;\n  --svb-deep: #061e46;\n  --svb-purple: #A064F0;\n  --svb-teal: #3CD2C8;\n  --svb-cyan: #50C8DC;\n\n  position: relative;\n  width: 100vw !important;\n  max-width: 100vw !important;\n  margin-left: calc(50% - 50vw) !important;\n  margin-right: calc(50% - 50vw) !important;\n  background:\n    radial-gradient(circle at 20% 10%, rgba(140, 181, 239, .14), transparent 32%),\n    radial-gradient(circle at 80% 20%, rgba(160, 100, 240, .12), transparent 34%),\n    radial-gradient(circle at 50% 80%, rgba(60, 210, 200, .08), transparent 36%),\n    #020617;\n  color: var(--svb-text);\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, sans-serif;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.svb-plugin-page,\n.svb-plugin-page * {\n  box-sizing: border-box;\n}\n\n.svb-section {\n  position: relative;\n  min-height: 100svh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 72px 24px;\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.svb-section::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  background-image:\n    linear-gradient(rgba(140,181,239,.055) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(140,181,239,.055) 1px, transparent 1px);\n  background-size: 54px 54px;\n  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 12%, transparent 78%);\n  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 12%, transparent 78%);\n  opacity: .75;\n}\n\n.svb-section + .svb-section {\n  border-top: 1px solid rgba(140, 181, 239, .12);\n}\n\n.svb-inner {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  max-width: 1120px;\n  margin: 0 auto;\n}\n\n.svb-hero-inner {\n  max-width: 940px;\n  text-align: center;\n}\n\n.svb-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--svb-blue);\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  font-weight: 700;\n  margin: 0 0 18px;\n  background: rgba(140,181,239,.08);\n  border: 1px solid rgba(140,181,239,.16);\n  border-radius: 999px;\n  padding: 7px 18px;\n}\n\n.svb-h1,\n.svb-h2,\n.svb-h3 {\n  color: #fff;\n  margin: 0;\n  letter-spacing: -.03em;\n}\n\n.svb-h1 {\n  font-size: clamp(38px, 5.2vw, 68px);\n  line-height: 1.04;\n  font-weight: 850;\n  margin-bottom: 24px;\n}\n\n.svb-h2 {\n  font-size: clamp(30px, 4vw, 48px);\n  line-height: 1.12;\n  font-weight: 820;\n  margin-bottom: 18px;\n}\n\n.svb-h3 {\n  font-size: 19px;\n  line-height: 1.32;\n  font-weight: 760;\n  margin-bottom: 12px;\n}\n\n.svb-grad {\n  display: inline-block;\n  padding-right: 6px;\n  padding-bottom: 4px;\n  background: linear-gradient(90deg, #ffffff 0%, #8CB5EF 44%, #ffffff 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  -webkit-text-fill-color: transparent;\n}\n\n.svb-lead {\n  max-width: 760px;\n  margin: 0 auto 34px;\n  font-size: clamp(17px, 1.7vw, 20px);\n  line-height: 1.68;\n  color: rgba(255,255,255,.72);\n}\n\n.svb-sub {\n  max-width: 720px;\n  margin: 0 auto;\n  font-size: clamp(15px, 1.5vw, 18px);\n  line-height: 1.7;\n  color: var(--svb-muted);\n}\n\n.svb-header {\n  text-align: center;\n  margin-bottom: 48px;\n}\n\n.svb-chip-row,\n.svb-btn-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 12px;\n}\n\n.svb-chip-row {\n  margin-bottom: 28px;\n}\n\n.svb-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: rgba(255,255,255,.74);\n  font-size: 13.5px;\n  line-height: 1;\n  padding: 8px 16px;\n  border-radius: 999px;\n  background: rgba(140,181,239,.07);\n  border: 1px solid rgba(140,181,239,.16);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.svb-chip svg {\n  width: 15px;\n  height: 15px;\n  color: var(--svb-blue);\n  flex-shrink: 0;\n}\n\n.svb-btn-row {\n  margin-top: 32px;\n}\n\n.svb-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  min-height: 48px;\n  padding: 14px 28px;\n  border-radius: 11px;\n  font-size: 15px;\n  font-weight: 700;\n  text-decoration: none !important;\n  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;\n}\n\n.svb-btn svg {\n  width: 17px;\n  height: 17px;\n  flex-shrink: 0;\n}\n\n.svb-btn-primary {\n  background: var(--svb-blue);\n  color: var(--svb-deep) !important;\n  box-shadow: 0 0 22px rgba(140,181,239,.18);\n}\n\n.svb-btn-primary:hover {\n  background: #a3c7f5;\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(140,181,239,.26);\n}\n\n.svb-btn-glass {\n  color: #fff !important;\n  background: rgba(140,181,239,.065);\n  border: 1px solid rgba(140,181,239,.22);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.svb-btn-glass:hover {\n  background: rgba(140,181,239,.12);\n  border-color: rgba(140,181,239,.42);\n  transform: translateY(-2px);\n}\n\n.svb-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px;\n}\n\n.svb-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 24px;\n}\n\n.svb-card {\n  position: relative;\n  height: 100%;\n  padding: 34px 28px;\n  border-radius: 18px;\n  background: var(--svb-panel);\n  border: 1px solid var(--svb-border);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;\n}\n\n.svb-card:hover {\n  transform: translateY(-5px);\n  background: var(--svb-panel-hover);\n  border-color: var(--svb-border-strong);\n  box-shadow:\n    0 0 22px rgba(140,181,239,.18),\n    0 0 48px rgba(140,181,239,.08),\n    inset 0 0 24px rgba(140,181,239,.04);\n}\n\n.svb-icon {\n  width: 50px;\n  height: 50px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 18px;\n  background: rgba(140,181,239,.09);\n  border: 1px solid rgba(140,181,239,.18);\n}\n\n.svb-icon svg {\n  width: 23px;\n  height: 23px;\n  stroke-width: 1.9;\n  color: var(--svb-blue);\n}\n\n.svb-icon-purple {\n  background: rgba(160,100,240,.09);\n  border-color: rgba(160,100,240,.2);\n}\n\n.svb-icon-purple svg {\n  color: var(--svb-purple);\n}\n\n.svb-icon-teal {\n  background: rgba(60,210,200,.09);\n  border-color: rgba(60,210,200,.2);\n}\n\n.svb-icon-teal svg {\n  color: var(--svb-teal);\n}\n\n.svb-icon-cyan {\n  background: rgba(80,200,220,.09);\n  border-color: rgba(80,200,220,.2);\n}\n\n.svb-icon-cyan svg {\n  color: var(--svb-cyan);\n}\n\n.svb-card p {\n  margin: 0;\n  color: rgba(255,255,255,.58);\n  font-size: 14.8px;\n  line-height: 1.72;\n}\n\n.svb-list {\n  list-style: none;\n  margin: 20px 0 0;\n  padding: 0;\n  display: grid;\n  gap: 10px;\n}\n\n.svb-list li {\n  position: relative;\n  padding-left: 25px;\n  color: rgba(255,255,255,.64);\n  font-size: 14.5px;\n  line-height: 1.55;\n}\n\n.svb-list li::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 3px;\n  width: 16px;\n  height: 16px;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%238CB5EF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'\/%3E%3C\/svg%3E\");\n}\n\n.svb-note {\n  margin-top: 28px;\n  padding: 22px 26px;\n  border-radius: 16px;\n  background: rgba(140,181,239,.045);\n  border: 1px solid rgba(140,181,239,.12);\n  color: rgba(255,255,255,.62);\n  font-size: 14.5px;\n  line-height: 1.7;\n  text-align: center;\n}\n\n.svb-note strong {\n  color: rgba(255,255,255,.88);\n}\n\n.svb-steps {\n  counter-reset: svb-step;\n  display: grid;\n  gap: 18px;\n}\n\n.svb-step {\n  counter-increment: svb-step;\n  display: grid;\n  grid-template-columns: 54px minmax(0, 1fr);\n  gap: 18px;\n  align-items: start;\n  padding: 24px;\n  border-radius: 18px;\n  background: rgba(140,181,239,.04);\n  border: 1px solid rgba(140,181,239,.12);\n}\n\n.svb-step::before {\n  content: counter(svb-step);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  border-radius: 13px;\n  background: linear-gradient(135deg, rgba(140,181,239,.95), rgba(160,100,240,.9));\n  color: #fff;\n  font-weight: 800;\n}\n\n.svb-step h3 {\n  margin: 0 0 8px;\n  color: #fff;\n  font-size: 18px;\n  line-height: 1.35;\n}\n\n.svb-step p {\n  margin: 0;\n  color: rgba(255,255,255,.6);\n  font-size: 14.8px;\n  line-height: 1.7;\n}\n\n.svb-code-card {\n  overflow: hidden;\n  border-radius: 18px;\n  background: rgba(2, 6, 23, .72);\n  border: 1px solid rgba(140,181,239,.16);\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n}\n\n.svb-code-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 13px 18px;\n  background: rgba(140,181,239,.08);\n  border-bottom: 1px solid rgba(140,181,239,.12);\n  color: rgba(255,255,255,.72);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.svb-code-dots {\n  display: flex;\n  gap: 6px;\n}\n\n.svb-code-dots span {\n  width: 10px;\n  height: 10px;\n  border-radius: 999px;\n  background: rgba(255,255,255,.22);\n}\n\n.svb-code-card pre {\n  margin: 0;\n  padding: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  color: #dbeafe;\n  font-size: 13.5px;\n  line-height: 1.65;\n  font-family: Consolas, Monaco, \"Courier New\", monospace;\n}\n\n.svb-specs {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  margin-top: 22px;\n}\n\n.svb-spec {\n  padding: 16px 18px;\n  border-radius: 14px;\n  background: rgba(140,181,239,.04);\n  border: 1px solid rgba(140,181,239,.12);\n}\n\n.svb-spec strong {\n  display: block;\n  color: #fff;\n  font-size: 14px;\n  margin-bottom: 5px;\n}\n\n.svb-spec span {\n  display: block;\n  color: rgba(255,255,255,.58);\n  font-size: 13.5px;\n  line-height: 1.45;\n}\n\n.svb-mini-title {\n  color: #fff;\n  font-size: 22px;\n  line-height: 1.25;\n  font-weight: 780;\n  margin: 0 0 18px;\n}\n\n.svb-divider {\n  height: 1px;\n  width: 100%;\n  background: linear-gradient(90deg, transparent, rgba(140,181,239,.24), transparent);\n  margin: 30px 0;\n}\n\n.svb-kbd {\n  display: inline-flex;\n  padding: 2px 7px;\n  border-radius: 6px;\n  background: rgba(255,255,255,.08);\n  border: 1px solid rgba(255,255,255,.12);\n  color: #fff;\n  font-size: .92em;\n  font-family: Consolas, Monaco, \"Courier New\", monospace;\n}\n\n.svb-cta {\n  max-width: 820px;\n  margin: 0 auto;\n  text-align: center;\n  padding: 56px 42px;\n  border-radius: 22px;\n  background: rgba(140,181,239,.045);\n  border: 1px solid rgba(140,181,239,.18);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow:\n    0 0 28px rgba(140,181,239,.12),\n    inset 0 0 36px rgba(140,181,239,.035);\n}\n\n.svb-cta p {\n  max-width: 650px;\n  margin: 0 auto;\n  color: rgba(255,255,255,.62);\n  font-size: 16px;\n  line-height: 1.72;\n}\n\n@media (max-width: 900px) {\n  .svb-section {\n    min-height: auto;\n    padding: 58px 20px;\n  }\n\n  .svb-grid-3,\n  .svb-grid-2,\n  .svb-specs {\n    grid-template-columns: 1fr;\n  }\n\n  .svb-grid-3,\n  .svb-grid-2 {\n    max-width: 520px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .svb-step {\n    grid-template-columns: 1fr;\n  }\n\n  .svb-btn {\n    width: 100%;\n    max-width: 340px;\n  }\n\n  .svb-cta {\n    padding: 42px 22px;\n  }\n}\n<\/style>\n\n<div class=\"svb-plugin-page\">\n\n  <section class=\"svb-section\" id=\"svb-top\">\n    <div class=\"svb-inner svb-hero-inner\">\n      <div class=\"svb-chip-row\">\n        <span class=\"svb-chip\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"><\/rect><path d=\"M8 22h8\"><\/path><path d=\"M12 18v4\"><\/path><\/svg>\n          plugin de WordPress\n        <\/span>\n        <span class=\"svb-chip\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M4 4v16\"><\/path><path d=\"M20 4v16\"><\/path><path d=\"M8 8h8\"><\/path><path d=\"M8 16h8\"><\/path><\/svg>\n          fondo de v\u00eddeo desplazable\n        <\/span>\n        <span class=\"svb-chip\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M12 20h9\"><\/path><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"><\/path><\/svg>\n          Gutenberg primero\n        <\/span>\n      <\/div>\n\n      <span class=\"svb-label\">Fondo de v\u00eddeo desplazable<\/span>\n\n      <h1 class=\"svb-h1\">\n        Transforma un v\u00eddeo en<br>\n        <span class=\"svb-grad\">fondo animado con desplazamiento<\/span><br>\n        para WordPress\n      <\/h1>\n\n      <p class=\"svb-lead\">\n        Un plugin de WordPress dise\u00f1ado para crear secciones o fondos de p\u00e1gina donde el v\u00eddeo avanza al desplazarse. La versi\u00f3n destinada al repositorio WordPress.org no utiliza GSAP, pero cuenta con una integraci\u00f3n clara y documentada con Gutenberg.\n      <\/p>\n\n      <div class=\"svb-btn-row\">\n        <a class=\"svb-btn svb-btn-primary\" href=\"#svb-tutorial\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M12 5v14\"><\/path><path d=\"M19 12l-7 7-7-7\"><\/path><\/svg>\n          Mira el video tutorial\n        <\/a>\n        <a class=\"svb-btn svb-btn-glass\" href=\"#svb-ffmpeg\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M4 17l6-6-6-6\"><\/path><path d=\"M12 19h8\"><\/path><\/svg>\n          Comando FFmpeg\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-problem\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">Objetivo del plugin<\/span>\n        <h2 class=\"svb-h2\"><span class=\"svb-grad\">Crea un efecto premium<\/span> sin complicar Gutenberg<\/h2>\n        <p class=\"svb-sub\">\n          El objetivo es ofrecer un bloque utilizable en el editor de WordPress, pero tambi\u00e9n un modo de fondo de p\u00e1gina global directamente accesible desde la configuraci\u00f3n lateral de Gutenberg.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-grid-3\">\n        <div class=\"svb-card\">\n          <div class=\"svb-icon svb-icon-purple\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18\"><\/path><path d=\"M9 21V9\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"svb-h3\">Bloque de secci\u00f3n de Gutenberg<\/h3>\n          <p>\n            Una secci\u00f3n de ancho completo que puede contener bloques internos: t\u00edtulos, textos, botones, columnas, grupos, im\u00e1genes o cualquier otro bloque compatible con Gutenberg.\n          <\/p>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <div class=\"svb-icon svb-icon-teal\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M4 4h16v16H4z\"><\/path><path d=\"M8 4v16\"><\/path><path d=\"M16 4v16\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"svb-h3\">Fondo de p\u00e1gina completa<\/h3>\n          <p>\n            Un modo de p\u00e1gina completa configurable desde la barra lateral de la p\u00e1gina, sin necesidad de insertar un bloque especial al principio del contenido.\n          <\/p>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <div class=\"svb-icon svb-icon-cyan\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9Z\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"svb-h3\">Configuraci\u00f3n sencilla<\/h3>\n          <p>\n            Selecci\u00f3n de v\u00eddeo desde la biblioteca multimedia, URL directa, superposici\u00f3n, opacidad, velocidad de desplazamiento, m\u00e1rgenes verticales, altura m\u00ednima y comportamiento adaptable.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-features\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">Caracter\u00edsticas planificadas<\/span>\n        <h2 class=\"svb-h2\">Un complemento <span class=\"svb-grad\">orientado a la producci\u00f3n<\/span><\/h2>\n        <p class=\"svb-sub\">\n          La prioridad es mantener el plugin limpio, comprensible, compatible con el repositorio oficial de WordPress.org y suficientemente documentado para evitar configuraciones err\u00f3neas.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-grid-3\">\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Editorial Gutenberg<\/h3>\n          <ul class=\"svb-list\">\n            <li>Bloque de secci\u00f3n con bloques interiores<\/li>\n            <li>Alineaci\u00f3n de ancho completo<\/li>\n            <li>Ajustando los m\u00e1rgenes superior e inferior<\/li>\n            <li>Altura m\u00ednima configurable<\/li>\n            <li>Superposici\u00f3n oscura o de color<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Configuraci\u00f3n de p\u00e1gina<\/h3>\n          <ul class=\"svb-list\">\n            <li>Panel lateral dedicado en Gutenberg<\/li>\n            <li>Opci\u00f3n \u201cDesplazar p\u00e1gina de fondo de v\u00eddeo\u201d<\/li>\n            <li>Selecci\u00f3n a trav\u00e9s de la biblioteca de medios de WordPress<\/li>\n            <li>Activaci\u00f3n p\u00e1gina por p\u00e1gina<\/li>\n            <li>Compatibilidad con temas para la edici\u00f3n completa del sitio<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Versi\u00f3n de WordPress.org<\/h3>\n          <ul class=\"svb-list\">\n            <li>C\u00f3digo JavaScript sin dependencia de GSAP<\/li>\n            <li>Archivos en ingl\u00e9s<\/li>\n            <li>Dominio de texto adecuado<\/li>\n            <li>Preparado para la internacionalizaci\u00f3n<\/li>\n            <li>Documentaci\u00f3n integrada en el plugin<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-note\">\n        <strong>Principio adoptado:<\/strong> La versi\u00f3n destinada al repositorio oficial debe ser sencilla, nativa y compatible con WordPress.org. Una versi\u00f3n avanzada con GSAP podr\u00eda estar disponible por separado en el sitio web de Etchenet.\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-tutorial\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">Usar<\/span>\n        <h2 class=\"svb-h2\">Dos formas de usar <span class=\"svb-grad\">Fondo de v\u00eddeo desplazable<\/span><\/h2>\n        <p class=\"svb-sub\">\n          El complemento debe cubrir dos usos distintos: una secci\u00f3n independiente de Gutenberg y un fondo de p\u00e1gina completa.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-grid-2\">\n        <div class=\"svb-card\">\n          <div class=\"svb-icon\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"><\/rect><path d=\"M7 8h10\"><\/path><path d=\"M7 12h6\"><\/path><path d=\"M7 16h8\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"svb-h3\">Modo de secci\u00f3n de Gutenberg<\/h3>\n          <ul class=\"svb-list\">\n            <li>Agregue el bloque \u201cSecci\u00f3n de fondo de video desplazable\u201d.<\/li>\n            <li>Selecciona un v\u00eddeo de la biblioteca multimedia.<\/li>\n            <li>Defina la altura, los m\u00e1rgenes verticales y la superposici\u00f3n.<\/li>\n            <li>Agregue contenido dentro del bloque.<\/li>\n            <li>Publica la p\u00e1gina.<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <div class=\"svb-icon svb-icon-purple\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M4 4h16v16H4z\"><\/path><path d=\"M4 9h16\"><\/path><path d=\"M9 9v11\"><\/path><\/svg>\n          <\/div>\n          <h3 class=\"svb-h3\">Modo de fondo completo<\/h3>\n          <ul class=\"svb-list\">\n            <li>Abre la p\u00e1gina en Gutenberg.<\/li>\n            <li>Utilice el panel lateral &quot;Desplazar p\u00e1gina de fondo de v\u00eddeo&quot;.<\/li>\n            <li>Habilitar el fondo de v\u00eddeo para esta p\u00e1gina.<\/li>\n            <li>Seleccione el v\u00eddeo de la biblioteca multimedia.<\/li>\n            <li>Construye la p\u00e1gina normalmente con Gutenberg.<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-note\">\n        El modo de p\u00e1gina completa no deber\u00eda depender de la inserci\u00f3n de un bloque en la parte superior de la p\u00e1gina. Deber\u00eda estar disponible en la configuraci\u00f3n de la barra lateral de la p\u00e1gina.\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-video-rules\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">V\u00eddeo recomendado<\/span>\n        <h2 class=\"svb-h2\">Un buen video es <span class=\"svb-grad\">corto, ligero y bien codificado<\/span><\/h2>\n        <p class=\"svb-sub\">\n          La calidad del efecto depende en gran medida de la preparaci\u00f3n del archivo de v\u00eddeo. Los fotogramas clave son esenciales para lograr un desplazamiento preciso.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-grid-2\">\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Especificaciones recomendadas<\/h3>\n          <div class=\"svb-specs\">\n            <div class=\"svb-spec\">\n              <strong>Formato<\/strong>\n              <span>MP4<\/span>\n            <\/div>\n            <div class=\"svb-spec\">\n              <strong>C\u00f3dec<\/strong>\n              <span>H.264<\/span>\n            <\/div>\n            <div class=\"svb-spec\">\n              <strong>Duraci\u00f3n<\/strong>\n              <span>De 5 a 15 segundos<\/span>\n            <\/div>\n            <div class=\"svb-spec\">\n              <strong>Velocidad de fotogramas<\/strong>\n              <span>30 fps<\/span>\n            <\/div>\n            <div class=\"svb-spec\">\n              <strong>Ancho<\/strong>\n              <span>M\u00e1ximo 1920 p\u00edxeles<\/span>\n            <\/div>\n            <div class=\"svb-spec\">\n              <strong>Audio<\/strong>\n              <span>Eliminado<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Funci\u00f3n de los fotogramas clave<\/h3>\n          <p>\n            Un fotograma clave es una imagen completa dentro del v\u00eddeo. Para un efecto controlado por desplazamiento, el navegador debe poder moverse de forma r\u00e1pida y precisa dentro del archivo.\n          <\/p>\n          <ul class=\"svb-list\">\n            <li>Fotogramas clave cada 0,5 segundos para un buen compromiso.<\/li>\n            <li>Fotograma clave cada 0,25 segundos para una mayor precisi\u00f3n.<\/li>\n            <li>El tama\u00f1o del archivo ser\u00e1 mayor si los fotogramas clave est\u00e1n muy juntos.<\/li>\n            <li>El desplazamiento resulta menos fluido si los fotogramas clave est\u00e1n demasiado separados.<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-ffmpeg\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">Tutorial de FFmpeg<\/span>\n        <h2 class=\"svb-h2\">Prepara un v\u00eddeo optimizado <span class=\"svb-grad\">para el pergamino<\/span><\/h2>\n        <p class=\"svb-sub\">\n          FFmpeg te permite convertir v\u00eddeo, eliminar audio, reducir el tama\u00f1o del archivo y forzar fotogramas clave regulares.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-steps\">\n        <div class=\"svb-step\">\n          <div>\n            <h3>Abra PowerShell o la terminal de Windows.<\/h3>\n            <p>\n              Utilice la terminal de Windows para instalar FFmpeg y ejecutar comandos de optimizaci\u00f3n de v\u00eddeo.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"svb-step\">\n          <div>\n            <h3>Instalar FFmpeg<\/h3>\n            <p>\n              Ejecuta el siguiente comando, luego cierra y vuelve a abrir la terminal.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-code-card\" style=\"margin-top:22px;\">\n        <div class=\"svb-code-head\">\n          <span>PowerShell<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>Instalaci\u00f3n de Winget --id Gyan.FFmpeg -e<\/code><\/pre>\n      <\/div>\n\n      <div class=\"svb-divider\"><\/div>\n\n      <div class=\"svb-steps\">\n        <div class=\"svb-step\">\n          <div>\n            <h3>Compruebe la instalaci\u00f3n<\/h3>\n            <p>\n              El comando deber\u00eda mostrar la versi\u00f3n instalada de FFmpeg.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-code-card\" style=\"margin-top:22px;\">\n        <div class=\"svb-code-head\">\n          <span>PowerShell<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>ffmpeg -versi\u00f3n<\/code><\/pre>\n      <\/div>\n\n      <div class=\"svb-divider\"><\/div>\n\n      <div class=\"svb-steps\">\n        <div class=\"svb-step\">\n          <div>\n            <h3>Prepara el archivo de trabajo<\/h3>\n            <p>\n              Coloca el v\u00eddeo original en una carpeta sencilla, por ejemplo <span class=\"svb-kbd\">C:\\Videos\\video de desplazamiento<\/span>, Luego, abre esta carpeta en PowerShell.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-code-card\" style=\"margin-top:22px;\">\n        <div class=\"svb-code-head\">\n          <span>PowerShell<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>cd C:\\Videos\\scroll-video<\/code><\/pre>\n      <\/div>\n\n      <div class=\"svb-divider\"><\/div>\n\n      <h3 class=\"svb-mini-title\">Orden recomendada<\/h3>\n\n      <div class=\"svb-code-card\">\n        <div class=\"svb-code-head\">\n          <span>MP4 optimizado: fotogramas clave cada 0,5 segundos.<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>ffmpeg -i &quot;video-originale.mp4&quot; -vf &quot;scale=1920:-2,fps=30&quot; -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames &quot;expr:gte(t,n_forced*0.5)&quot; &quot;video-scroll-optimisee.mp4&quot;\"<\/code><\/pre>\n      <\/div>\n\n      <div class=\"svb-grid-2\" style=\"margin-top:24px;\">\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Versi\u00f3n de alta sensibilidad<\/h3>\n          <p>\n            Fotogramas clave cada 0,25 segundos. Mayor precisi\u00f3n, aunque potencialmente mayor tama\u00f1o de archivo.\n          <\/p>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Versi\u00f3n ligera<\/h3>\n          <p>\n            Resoluci\u00f3n de 1280 p\u00edxeles y mayor compresi\u00f3n. Mejor rendimiento, menor calidad visual.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"svb-code-card\" style=\"margin-top:24px;\">\n        <div class=\"svb-code-head\">\n          <span>Alta fluidez<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>ffmpeg -i &quot;video-originale.mp4&quot; -vf &quot;scale=1920:-2,fps=30&quot; -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 8 -keyint_min 8 -sc_threshold 0 -force_key_frames &quot;expr:gte(t,n_forced*0.25)&quot; &quot;video-scroll-haute-fluidite.mp4&quot;\"<\/code><\/pre>\n      <\/div>\n\n      <div class=\"svb-code-card\" style=\"margin-top:24px;\">\n        <div class=\"svb-code-head\">\n          <span>Versi\u00f3n ligera<\/span>\n          <div class=\"svb-code-dots\"><span><\/span><span><\/span><span><\/span><\/div>\n        <\/div>\n        <pre><code>ffmpeg -i &quot;video-originale.mp4&quot; -vf &quot;scale=1280:-2,fps=30&quot; -an -c:v libx264 -preset slow -crf 26 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames &quot;expr:gte(t,n_forced*0.5)&quot; &quot;video-scroll-legere.mp4&quot;\"<\/code><\/pre>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-roadmap\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-header\">\n        <span class=\"svb-label\">Proyecto WordPress.org<\/span>\n        <h2 class=\"svb-h2\">Una base limpia para <span class=\"svb-grad\">publicaci\u00f3n, traducci\u00f3n y novedades<\/span><\/h2>\n        <p class=\"svb-sub\">\n          El plugin est\u00e1 dise\u00f1ado para ser publicado en el repositorio oficial, documentado en ingl\u00e9s y luego traducido a trav\u00e9s del sistema oficial WordPress Polyglots.\n        <\/p>\n      <\/div>\n\n      <div class=\"svb-grid-3\">\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Documentaci\u00f3n integrada<\/h3>\n          <ul class=\"svb-list\">\n            <li>P\u00e1gina principal en el men\u00fa de WordPress<\/li>\n            <li>Enlace directo desde la p\u00e1gina de extensiones<\/li>\n            <li>Gu\u00eda de preparaci\u00f3n de v\u00eddeo<\/li>\n            <li>Ejemplos FFmpeg<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Complemento de cumplimiento<\/h3>\n          <ul class=\"svb-list\">\n            <li>URI de complemento y URI de autor por separado.<\/li>\n            <li>El dominio del texto se ajusta<\/li>\n            <li>Saneamiento y escape<\/li>\n            <li>No hay dependencias externas obligatorias.<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"svb-card\">\n          <h3 class=\"svb-h3\">Posibles novedades<\/h3>\n          <ul class=\"svb-list\">\n            <li>Versi\u00f3n GSAP independiente<\/li>\n            <li>Ajustes de limpieza avanzados<\/li>\n            <li>preajustes visuales<\/li>\n            <li>Convocatoria de donaciones en la p\u00e1gina web de Etchenet<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"svb-section\" id=\"svb-cta\">\n    <div class=\"svb-inner\">\n      <div class=\"svb-cta\">\n        <span class=\"svb-label\">Fondo de v\u00eddeo desplazable<\/span>\n        <h2 class=\"svb-h2\">Un plugin de WordPress para crear p\u00e1ginas <span class=\"svb-grad\">m\u00e1s inmersivo<\/span><\/h2>\n        <p>\n          El plugin permite utilizar un v\u00eddeo como fondo animado sincronizado con el desplazamiento, con una configuraci\u00f3n dise\u00f1ada para Gutenberg, temas de edici\u00f3n completa del sitio y publicaci\u00f3n limpia en WordPress.org.\n        <\/p>\n\n        <div class=\"svb-btn-row\">\n          <a class=\"svb-btn svb-btn-primary\" href=\"https:\/\/etchenet.com\/#contact\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M4 4h16v16H4z\"><\/path><path d=\"m22 6-10 7L2 6\"><\/path><\/svg>\n            P\u00f3ngase en contacto conmigo\n          <\/a>\n          <a class=\"svb-btn svb-btn-glass\" href=\"https:\/\/etchenet.com\/\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M3 12h18\"><\/path><path d=\"M12 3l9 9-9 9\"><\/path><\/svg>\n            Volver a Etchenet\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress plugin Scroll video background Gutenberg first Scroll Video Background Transformez une vid\u00e9o en fond anim\u00e9 au scroll pour WordPress Un plugin WordPress pens\u00e9 pour cr\u00e9er des sections ou des arri\u00e8re-plans de page o\u00f9 la vid\u00e9o avance avec le d\u00e9filement. Sans GSAP dans la version destin\u00e9e au d\u00e9p\u00f4t WordPress.org, avec une int\u00e9gration Gutenberg claire et [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","ai_generated_summary":"","_svbs_page_enabled":false,"_svbs_page_video_id":0,"_svbs_page_video_url":"","_svbs_page_overlay_opacity":0.45,"_svbs_page_scroll_range":1000,"_svbs_page_start_time":0,"_svbs_page_end_time":0,"_svbs_page_mobile_behavior":"enabled","_svbs_page_z_index":0,"footnotes":""},"class_list":["post-7449","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/comments?post=7449"}],"version-history":[{"count":1,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7449\/revisions"}],"predecessor-version":[{"id":7450,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7449\/revisions\/7450"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7449"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}