{"id":1272,"date":"2018-04-16T16:05:31","date_gmt":"2018-04-16T08:05:31","guid":{"rendered":"https:\/\/believeindustry.company\/?page_id=1272"},"modified":"2026-06-14T20:36:25","modified_gmt":"2026-06-14T12:36:25","slug":"video","status":"publish","type":"page","link":"https:\/\/believeindustry.company\/es\/video\/","title":{"rendered":"VIDEO"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Believe Industry \u2014 Video Hub<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --brand: #c47a0a;\r\n --brand-dark: #9a5f08;\r\n --brand-light: #e89820;\r\n --accent: #e85d1a;\r\n --bg: #e8e6e1;\r\n --bg-warm: #ddd9d2;\r\n --surface: #f5f3ef;\r\n --surface-alt: #eeece7;\r\n --border: #c8c4bc;\r\n --border-dark: #b0ab9f;\r\n --text-main: #2a2520;\r\n --text-muted: #6b6560;\r\n --text-hint: #9a948c;\r\n --steel: #606a78;\r\n --steel-light: #8892a0;\r\n --concrete: #a8a49c;\r\n --dark-panel: #2e2b28;\r\n --dark-panel-l: #3a3733;\r\n --radius-sm: 3px;\r\n --radius-md: 5px;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n background: var(--bg);\r\n color: var(--text-main);\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO \/ FEATURE IMAGE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 420px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n \/* Diagonal steel plate texture overlay *\/\r\n .hero-bg::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background:\r\n repeating-linear-gradient(\r\n 45deg,\r\n transparent,\r\n transparent 30px,\r\n rgba(255,255,255,.02) 30px,\r\n rgba(255,255,255,.02) 31px\r\n ),\r\n repeating-linear-gradient(\r\n -45deg,\r\n transparent,\r\n transparent 30px,\r\n rgba(255,255,255,.015) 30px,\r\n rgba(255,255,255,.015) 31px\r\n );\r\n }\r\n\r\n \/* Dark gradient overlay for text readability *\/\r\n .hero-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(20,18,15,.55) 0%,\r\n rgba(20,18,15,.25) 40%,\r\n rgba(20,18,15,.70) 100%\r\n );\r\n }\r\n\r\n \/* Grid line overlay \u2014 industrial feel *\/\r\n .hero-overlay::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background:\r\n linear-gradient(rgba(196,122,10,.06) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(196,122,10,.06) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\r\n mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\r\n }\r\n\r\n \/* Top hazard stripe *\/\r\n .hero::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 4px;\r\n background: repeating-linear-gradient(\r\n -45deg,\r\n var(--brand),\r\n var(--brand) 8px,\r\n #2e2b28 8px,\r\n #2e2b28 16px\r\n );\r\n z-index: 5;\r\n }\r\n\r\n \/* Bottom hazard stripe *\/\r\n .hero::after {\r\n content: '';\r\n position: absolute; bottom: 0; left: 0; right: 0;\r\n height: 4px;\r\n background: repeating-linear-gradient(\r\n -45deg,\r\n var(--brand),\r\n var(--brand) 8px,\r\n #2e2b28 8px,\r\n #2e2b28 16px\r\n );\r\n z-index: 5;\r\n }\r\n\r\n .hero-content {\r\n position: relative; z-index: 2;\r\n text-align: center;\r\n padding: 0 2rem;\r\n max-width: 900px;\r\n }\r\n\r\n .hero-label {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 12px; font-weight: 600;\r\n color: var(--brand-light);\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n display: flex; align-items: center; justify-content: center; gap: 10px;\r\n }\r\n .hero-label::before,\r\n .hero-label::after {\r\n content: '';\r\n width: 40px; height: 1px;\r\n background: var(--brand);\r\n opacity: .6;\r\n }\r\n\r\n .hero-title {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: clamp(36px, 5.5vw, 64px);\r\n font-weight: 700;\r\n color: #fff;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n line-height: 1.05;\r\n text-shadow: 0 2px 20px rgba(0,0,0,.5);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .hero-title::after {\r\n content: '';\r\n display: block;\r\n width: 80px; height: 3px;\r\n background: var(--brand);\r\n margin: 14px auto 0;\r\n }\r\n\r\n .hero-subtitle {\r\n font-family: 'Inter', sans-serif;\r\n font-size: clamp(13px, 1.4vw, 16px);\r\n font-weight: 400;\r\n color: rgba(255,255,255,.72);\r\n letter-spacing: 1px;\r\n line-height: 1.6;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center; gap: 6px;\r\n margin-top: 22px;\r\n padding: 5px 16px;\r\n background: rgba(196,122,10,.15);\r\n border: 1px solid rgba(196,122,10,.3);\r\n border-radius: 2px;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 11px; font-weight: 600;\r\n color: var(--brand-light);\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n }\r\n .hero-badge .dot {\r\n width: 5px; height: 5px;\r\n background: #2ecc71;\r\n border-radius: 1px;\r\n box-shadow: 0 0 6px #2ecc71;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATUS BAR\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .status-bar {\r\n max-width: 1200px; margin: 0 auto;\r\n padding: 0 2rem;\r\n }\r\n .status-msg {\r\n font-size: 11px; color: var(--text-hint);\r\n padding: 6px 0;\r\n display: flex; align-items: center; gap: 6px;\r\n text-transform: uppercase; letter-spacing: .5px;\r\n font-family: 'Rajdhani', sans-serif; font-weight: 600;\r\n }\r\n .status-msg .dot { width: 6px; height: 6px; border-radius: 1px; }\r\n .status-msg .dot.loading { background: var(--brand); animation: pulse 1s infinite; }\r\n .status-msg .dot.ok { background: #2ecc71; }\r\n .status-msg .dot.err { background: #e74c3c; }\r\n @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CATEGORY TABS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .tabs-wrap {\r\n background: var(--surface);\r\n border-bottom: 2px solid var(--border);\r\n overflow-x: auto;\r\n scrollbar-width: none;\r\n }\r\n .tabs-wrap::-webkit-scrollbar { display: none; }\r\n .tabs-inner {\r\n max-width: 1200px; margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex; gap: 0;\r\n }\r\n .tab-item {\r\n display: flex; align-items: center; gap: 8px;\r\n padding: 13px 24px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n position: relative;\r\n user-select: none;\r\n transition: color .12s, background .12s;\r\n color: var(--text-muted);\r\n border-bottom: 2px solid transparent;\r\n margin-bottom: -2px;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 14px; font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: .8px;\r\n }\r\n .tab-item:hover { color: var(--text-main); background: rgba(0,0,0,.02); }\r\n .tab-item.active {\r\n color: var(--brand);\r\n border-bottom-color: var(--brand);\r\n }\r\n .tab-diamond {\r\n width: 8px; height: 8px;\r\n transform: rotate(45deg);\r\n flex-shrink: 0;\r\n }\r\n .tab-count {\r\n font-size: 10px; background: var(--bg);\r\n padding: 1px 7px; border-radius: 2px;\r\n color: var(--text-hint); font-weight: 500;\r\n font-family: 'Inter', sans-serif;\r\n border: 1px solid var(--border);\r\n }\r\n .tab-item.active .tab-count {\r\n color: var(--brand); border-color: rgba(196,122,10,.3);\r\n background: rgba(196,122,10,.06);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MAIN AREA\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .main-area {\r\n max-width: 1200px; margin: 0 auto;\r\n padding: 1.5rem 2rem 3rem;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PLAYER SECTION\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .player-section { margin-bottom: 0; }\r\n .player-frame {\r\n background: var(--dark-panel);\r\n border: 2px solid var(--border-dark);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n aspect-ratio: 16 \/ 9;\r\n position: relative;\r\n box-shadow: 0 4px 20px rgba(0,0,0,.12);\r\n }\r\n .player-frame iframe {\r\n width: 100%; height: 100%;\r\n border: none; display: block;\r\n }\r\n .player-info {\r\n background: #fff;\r\n border: 1px solid var(--border);\r\n border-top: none;\r\n border-radius: 0 0 var(--radius-md) var(--radius-md);\r\n padding: 14px 18px;\r\n display: flex; align-items: center; gap: 10px; flex-wrap: wrap;\r\n }\r\n .player-title {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 16px; font-weight: 700;\r\n color: var(--text-main);\r\n flex: 1; min-width: 200px;\r\n text-transform: uppercase; letter-spacing: .3px;\r\n }\r\n .player-meta {\r\n display: flex; gap: 8px; align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n .player-cat-badge {\r\n padding: 3px 10px; border-radius: 2px;\r\n font-size: 11px; font-weight: 600;\r\n font-family: 'Rajdhani', sans-serif;\r\n text-transform: uppercase; letter-spacing: .5px;\r\n }\r\n\r\n .btn-action {\r\n padding: 7px 14px;\r\n border-radius: var(--radius-sm);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 12px; font-weight: 600; cursor: pointer;\r\n transition: all .15s; white-space: nowrap;\r\n display: inline-flex; align-items: center; gap: 6px;\r\n text-transform: uppercase; letter-spacing: .5px;\r\n }\r\n .btn-outline {\r\n background: #fff; color: var(--text-muted);\r\n border: 1px solid var(--border);\r\n }\r\n .btn-outline:hover { border-color: var(--brand); color: var(--brand); }\r\n .btn-playall {\r\n background: linear-gradient(135deg, var(--brand), var(--brand-dark));\r\n color: #fff;\r\n border: 1px solid var(--brand);\r\n box-shadow: 0 2px 8px rgba(196,122,10,.2);\r\n }\r\n .btn-playall:hover {\r\n background: linear-gradient(135deg, var(--brand-light), var(--brand));\r\n box-shadow: 0 4px 12px rgba(196,122,10,.3);\r\n }\r\n\r\n \/* Player action buttons (right side) *\/\r\n .player-actions {\r\n display: flex; align-items: center; gap: 8px;\r\n margin-left: auto;\r\n }\r\n .btn-player-share {\r\n display: inline-flex; align-items: center; gap: 5px;\r\n padding: 6px 12px;\r\n border-radius: var(--radius-sm);\r\n background: #fff;\r\n color: var(--text-muted);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 12px; font-weight: 600;\r\n text-transform: uppercase; letter-spacing: .5px;\r\n border: 1px solid var(--border);\r\n cursor: pointer;\r\n transition: all .15s;\r\n }\r\n .btn-player-share:hover { border-color: var(--brand); color: var(--brand); }\r\n .btn-player-share svg { width: 14px; height: 14px; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CTA BAR (below player)\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .cta-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n padding: 18px 0 22px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-subscribe {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 10px 26px;\r\n border-radius: var(--radius-sm);\r\n background: #c00;\r\n color: #fff;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 14px; font-weight: 600;\r\n text-transform: uppercase; letter-spacing: .8px;\r\n text-decoration: none;\r\n border: none; cursor: pointer;\r\n transition: background .15s, box-shadow .15s, transform .1s;\r\n box-shadow: 0 3px 10px rgba(204,0,0,.3);\r\n }\r\n .btn-subscribe:hover {\r\n background: #a00;\r\n box-shadow: 0 6px 18px rgba(204,0,0,.4);\r\n transform: translateY(-1px);\r\n }\r\n .btn-subscribe svg { width: 18px; height: 18px; flex-shrink: 0; }\r\n\r\n .btn-quote {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 10px 26px;\r\n border-radius: var(--radius-sm);\r\n background: linear-gradient(135deg, var(--brand), var(--brand-dark));\r\n color: #fff;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 14px; font-weight: 600;\r\n text-transform: uppercase; letter-spacing: .8px;\r\n text-decoration: none;\r\n border: 1px solid var(--brand);\r\n cursor: pointer;\r\n transition: background .15s, box-shadow .15s, transform .1s;\r\n box-shadow: 0 3px 10px rgba(196,122,10,.25);\r\n }\r\n .btn-quote:hover {\r\n background: linear-gradient(135deg, var(--brand-light), var(--brand));\r\n box-shadow: 0 6px 18px rgba(196,122,10,.35);\r\n transform: translateY(-1px);\r\n }\r\n .btn-quote svg { width: 16px; height: 16px; flex-shrink: 0; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n REFRESH BAR\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .refresh-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n padding: 8px 2rem 0;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n .btn-refresh {\r\n padding: 7px 14px;\r\n border-radius: var(--radius-sm);\r\n border: 1px solid var(--border);\r\n background: #fff;\r\n color: var(--text-muted);\r\n font-size: 12px; font-weight: 500; font-family: inherit;\r\n cursor: pointer;\r\n display: flex; align-items: center; gap: 6px;\r\n transition: all .15s; white-space: nowrap;\r\n text-transform: uppercase; letter-spacing: .5px;\r\n }\r\n .btn-refresh:hover { border-color: var(--brand); color: var(--brand); }\r\n .btn-refresh.spinning svg { animation: spin .8s linear infinite; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n VIDEO GRID\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .grid-header {\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-bottom: 1rem; gap: 12px;\r\n padding-bottom: 8px;\r\n border-bottom: 2px solid var(--border);\r\n }\r\n .grid-title {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 17px; font-weight: 700; color: var(--text-main);\r\n display: flex; align-items: center; gap: 10px;\r\n text-transform: uppercase; letter-spacing: .8px;\r\n }\r\n .grid-count {\r\n font-size: 12px; color: var(--steel); font-weight: 500;\r\n font-family: 'Rajdhani', sans-serif;\r\n }\r\n\r\n .video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n gap: 16px;\r\n }\r\n\r\n .video-card {\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: border-color .15s, box-shadow .2s, transform .12s;\r\n background: #fff;\r\n position: relative;\r\n }\r\n .video-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n background: var(--brand);\r\n opacity: 0;\r\n transition: opacity .15s;\r\n }\r\n .video-card:hover {\r\n border-color: var(--brand);\r\n box-shadow: 0 4px 16px rgba(196,122,10,.12);\r\n transform: translateY(-2px);\r\n }\r\n .video-card:hover::before { opacity: 1; }\r\n .video-card.active {\r\n border-color: var(--brand);\r\n background: #fdf8ef;\r\n }\r\n .video-card.active::before { opacity: 1; }\r\n\r\n .card-thumb {\r\n position: relative;\r\n aspect-ratio: 16\/9;\r\n background: var(--dark-panel);\r\n overflow: hidden;\r\n }\r\n .card-thumb img {\r\n width: 100%; height: 100%; object-fit: cover; display: block;\r\n transition: transform .25s;\r\n }\r\n .video-card:hover .card-thumb img { transform: scale(1.04); }\r\n\r\n .card-play-overlay {\r\n position: absolute; inset: 0;\r\n background: rgba(0,0,0,0);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .15s;\r\n }\r\n .video-card:hover .card-play-overlay { background: rgba(0,0,0,.3); }\r\n .card-play-btn {\r\n width: 40px; height: 40px;\r\n background: var(--brand);\r\n border-radius: 3px;\r\n display: flex; align-items: center; justify-content: center;\r\n opacity: 0; transition: opacity .15s, transform .15s;\r\n transform: scale(.85);\r\n }\r\n .video-card:hover .card-play-btn { opacity: 1; transform: scale(1); }\r\n .card-play-btn::after {\r\n content: '';\r\n border-left: 12px solid #fff;\r\n border-top: 7px solid transparent;\r\n border-bottom: 7px solid transparent;\r\n margin-left: 3px;\r\n }\r\n\r\n .card-index {\r\n position: absolute; top: 6px; left: 6px;\r\n background: rgba(46,43,40,.8); color: var(--brand-light);\r\n font-size: 10px; padding: 2px 7px; border-radius: 2px;\r\n font-weight: 700;\r\n font-family: 'Rajdhani', sans-serif;\r\n }\r\n\r\n .card-body { padding: 12px 13px 14px; }\r\n .card-title {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 13.5px; font-weight: 600;\r\n color: var(--text-main); line-height: 1.4;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-transform: uppercase; letter-spacing: .2px;\r\n }\r\n .card-date {\r\n font-size: 11px; color: var(--steel); margin-top: 4px;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n .card-category {\r\n display: inline-block; margin-top: 6px;\r\n padding: 2px 8px; border-radius: 2px;\r\n font-size: 10.5px; font-weight: 600;\r\n font-family: 'Rajdhani', sans-serif;\r\n text-transform: uppercase; letter-spacing: .3px;\r\n }\r\n\r\n .no-results {\r\n text-align: center; padding: 3rem 1rem;\r\n color: var(--text-hint); font-size: 14px;\r\n }\r\n\r\n .skeleton-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n gap: 16px;\r\n }\r\n .skeleton-card {\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n background: #fff;\r\n }\r\n .skeleton-thumb {\r\n aspect-ratio: 16\/9;\r\n background: linear-gradient(90deg, #eeece7 25%, #f5f3ef 50%, #eeece7 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite;\r\n }\r\n .skeleton-body { padding: 12px 13px 14px; }\r\n .skeleton-line {\r\n height: 12px; border-radius: 2px; margin-bottom: 6px;\r\n background: linear-gradient(90deg, #eeece7 25%, #f5f3ef 50%, #eeece7 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite;\r\n }\r\n .skeleton-line.short { width: 60%; }\r\n .skeleton-line.tiny { width: 40%; height: 10px; margin-top: 8px; }\r\n @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 700px) {\r\n .hero { height: 260px; }\r\n .hero-title { letter-spacing: 1.5px; }\r\n .main-area { padding: 1rem 1rem 2rem; }\r\n .tabs-inner { padding: 0 1rem; }\r\n .tab-item { padding: 10px 14px; font-size: 13px; }\r\n .video-grid, .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }\r\n .player-info { flex-direction: column; align-items: flex-start; gap: 8px; }\r\n .player-actions { margin-left: 0; width: 100%; justify-content: flex-start; }\r\n .status-bar { padding: 0 1rem; }\r\n .refresh-bar { padding: 8px 1rem 0; }\r\n .cta-bar { gap: 10px; padding: 14px 0 18px; }\r\n .btn-subscribe, .btn-quote { padding: 9px 18px; font-size: 13px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \u270f\ufe0f CONFIGURATION \u2014 EDIT BELOW\r\n \u2022 CHANNEL_HANDLE: Your YouTube handle (for Subscribe button)\r\n \u2022 QUOTE_LINK: URL for \"Request a quote\" button\r\n \u2022 CATEGORIES: Playlist config \u2014 videos auto-fetched from YouTube\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/\/ \u2550\u2550 Your YouTube Channel Handle \u2550\u2550\r\n\/\/ Just put your handle below (the part after youtube.com\/@........)\r\nconst CHANNEL_HANDLE = '@ROLLFORMINGMACHINE'; \/\/ \u2190 Your channel handle\r\n\r\n\/\/ \u2550\u2550 Quote request link \u2550\u2550\r\n\/\/ Change this to your contact\/quote page or email link\r\nconst QUOTE_LINK = 'https:\/\/www.believeindustry.company\/contact'; \/\/ \u2190 CHANGE this to your quote page URL\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550 HERO \/ FEATURE IMAGE \u2550\u2550\u2550 -->\r\n<div class=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <div class=\"hero-label\">Believe Industry<\/div>\r\n <h1 class=\"hero-title\">Machines in Action<\/h1>\r\n <p class=\"hero-subtitle\">\r\n Watch our roll forming machines, solar solutions, and industrial equipment in operation.\r\n Real footage from our factory floor and customer sites worldwide.\r\n <\/p>\r\n <div class=\"hero-badge\">\r\n <span class=\"dot\"><\/span>\r\n <span id=\"hero-video-count\">\u2014<\/span> Videos\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 REFRESH BAR \u2550\u2550\u2550 -->\r\n<div class=\"refresh-bar\">\r\n <button class=\"btn-refresh\" id=\"btn-refresh\" onclick=\"refreshAll()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/><\/svg>\r\n Refresh\r\n <\/button>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 STATUS \u2550\u2550\u2550 -->\r\n<div class=\"status-bar\">\r\n <div class=\"status-msg\" id=\"status-msg\">\r\n <span class=\"dot loading\"><\/span> Loading videos from YouTube\u2026\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 CATEGORY TABS \u2550\u2550\u2550 -->\r\n<div class=\"tabs-wrap\">\r\n <div class=\"tabs-inner\" id=\"tabs-container\"><\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 MAIN CONTENT \u2550\u2550\u2550 -->\r\n<div class=\"main-area\">\r\n\r\n <!-- PLAYER -->\r\n <div class=\"player-section\">\r\n <div class=\"player-frame\">\r\n <iframe id=\"yt-player\" src=\"\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen title=\"Video player\"><\/iframe>\r\n <\/div>\r\n <div class=\"player-info\">\r\n <div class=\"player-title\" id=\"player-title\">Loading playlist\u2026<\/div>\r\n <div class=\"player-meta\" id=\"player-meta\"><\/div>\r\n <div class=\"player-actions\">\r\n <button class=\"btn-action btn-playall\" onclick=\"playAllPlaylist()\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><polygon points=\"3,2 17,10 3,18\"\/><\/svg>\r\n Play all\r\n <\/button>\r\n <button class=\"btn-action btn-outline\" onclick=\"pickRandomVideo()\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 7h10l4-4m0 0l-4-4m4 4H13m0 10H3m10 0l4-4m-4 4l4 4\"\/><\/svg>\r\n Random\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA BAR: Subscribe + Request a quote (centered below player) -->\r\n <div class=\"cta-bar\">\r\n <!-- Subscribe to YouTube Channel -->\r\n <a class=\"btn-subscribe\" id=\"btn-subscribe\" href=\"#\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/><\/svg>\r\n Subscribe our channel\r\n <\/a>\r\n <!-- Request a quote -->\r\n <a class=\"btn-quote\" id=\"btn-quote\" href=\"#\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"9\" y1=\"15\" x2=\"15\" y2=\"15\"\/><line x1=\"9\" y1=\"18\" x2=\"15\" y2=\"18\"\/><\/svg>\r\n Request a quote\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- GRID -->\r\n <div class=\"grid-header\">\r\n <div class=\"grid-title\">\r\n <span id=\"grid-cat-name\">Videos<\/span>\r\n <span class=\"grid-count\" id=\"grid-count\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"grid-area\">\r\n <div class=\"skeleton-grid\" id=\"skeleton-grid\">\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"video-grid\" id=\"video-grid\" style=\"display:none;\"><\/div>\r\n <div class=\"no-results\" id=\"no-results\" style=\"display:none;\">\r\n <div>No videos found.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst CATEGORIES = [\r\n {\r\n id: 'construction',\r\n name: 'Construction & Steel Structure',\r\n color: '#3a6ba8',\r\n playlistId: 'PLIdLHSelevdKkSepemeMEqoM4mrFMKOlL'\r\n },\r\n {\r\n id: 'solar',\r\n name: 'Solar & Electric',\r\n color: '#c47a0a',\r\n playlistId: 'PLIdLHSelevdLn3i_fQYUnjexMh3xmzNI8'\r\n },\r\n {\r\n id: 'logistics',\r\n name: 'Logistics & Storage',\r\n color: '#2a7a4a',\r\n playlistId: 'PLIdLHSelevdJ3oCMjCm3yyPy4jVPcbY0v'\r\n },\r\n {\r\n id: 'doorwindow',\r\n name: 'Door & Window',\r\n color: '#b83030',\r\n playlistId: 'PLIdLHSelevdJVhbMxACBXU0EvnLtj26zb'\r\n }\r\n];\r\n\r\nlet ALL_VIDEOS = [];\r\nlet currentCategory = CATEGORIES[0].id;\r\nlet currentVideoId = null;\r\nlet fetchErrors = [];\r\n\r\n\/* \u2500\u2500 HELPERS \u2500\u2500 *\/\r\nfunction getCat(id) { return CATEGORIES.find(function(c) { return c.id === id; }); }\r\n\r\nfunction formatPubDate(dateStr) {\r\n if (!dateStr) return '';\r\n try {\r\n var d = new Date(dateStr);\r\n var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\r\n return months[d.getMonth()] + ' ' + d.getFullYear();\r\n } catch(e) { return dateStr; }\r\n}\r\n\r\nfunction extractVideoId(url) {\r\n if (!url) return '';\r\n var match = url.match(\/[?&]v=([^&]+)\/);\r\n if (match) return match[1];\r\n match = url.match(\/\\\/watch\\\/([^?\/]+)\/);\r\n if (match) return match[1];\r\n return '';\r\n}\r\n\r\n\/* \u2500\u2500 FETCH \u2500\u2500 *\/\r\nasync function fetchPlaylistVideos(cat) {\r\n var rssUrl = 'https:\/\/www.youtube.com\/feeds\/videos.xml?playlist_id=' + cat.playlistId;\r\n var apiUrl = 'https:\/\/api.rss2json.com\/v1\/api.json?rss_url=' + encodeURIComponent(rssUrl);\r\n try {\r\n var resp = await fetch(apiUrl);\r\n if (!resp.ok) throw new Error('HTTP ' + resp.status);\r\n var data = await resp.json();\r\n if (data.status !== 'ok' || !data.items || !data.items.length) throw new Error('Empty response');\r\n return data.items.map(function(item) {\r\n var vid = extractVideoId(item.link);\r\n if (!vid && item.guid) { var m = String(item.guid).match(\/yt:video:(.+)\/); if (m) vid = m[1]; }\r\n return { id: vid || '', title: item.title || 'Untitled', date: formatPubDate(item.pubDate), category: cat.id, thumbnail: item.thumbnail || '' };\r\n }).filter(function(v) { return v.id; });\r\n } catch(e) {\r\n console.warn('Failed: ' + cat.name, e.message);\r\n fetchErrors.push(cat.name + ': ' + e.message);\r\n return [];\r\n }\r\n}\r\n\r\nasync function fetchAllVideos() {\r\n fetchErrors = [];\r\n var results = await Promise.all(CATEGORIES.map(fetchPlaylistVideos));\r\n ALL_VIDEOS = [];\r\n results.forEach(function(v) { ALL_VIDEOS = ALL_VIDEOS.concat(v); });\r\n return ALL_VIDEOS;\r\n}\r\n\r\n\/* \u2500\u2500 STATUS \u2500\u2500 *\/\r\nfunction setStatus(type, msg) {\r\n var el = document.getElementById('status-msg');\r\n var dotClass = type === 'loading' ? 'loading' : type === 'ok' ? 'ok' : 'err';\r\n el.innerHTML = '<span class=\"dot ' + dotClass + '\"><\/span> ' + msg;\r\n}\r\n\r\n\/* \u2500\u2500 RENDER TABS \u2500\u2500 *\/\r\nfunction renderTabs() {\r\n var container = document.getElementById('tabs-container');\r\n container.innerHTML = CATEGORIES.map(function(c) {\r\n var count = ALL_VIDEOS.filter(function(v) { return v.category === c.id; }).length;\r\n var isActive = c.id === currentCategory;\r\n return '<div class=\"tab-item' + (isActive ? ' active' : '') + '\" data-cat=\"' + c.id + '\">'\r\n + '<div class=\"tab-diamond\" style=\"background:' + c.color + '\"><\/div>'\r\n + c.name\r\n + '<span class=\"tab-count\">' + count + '<\/span>'\r\n + '<\/div>';\r\n }).join('');\r\n}\r\n\r\ndocument.getElementById('tabs-container').addEventListener('click', function(e) {\r\n var tab = e.target.closest('.tab-item');\r\n if (tab) { var id = tab.getAttribute('data-cat'); if (id) switchCategory(id); }\r\n});\r\n\r\nfunction switchCategory(catId) {\r\n currentCategory = catId;\r\n renderTabs(); renderGrid(); playAllPlaylist();\r\n}\r\n\r\n\/* \u2500\u2500 PLAY \u2500\u2500 *\/\r\nfunction playVideo(videoId, title, catId) {\r\n currentVideoId = videoId;\r\n var cat = getCat(catId);\r\n document.getElementById('yt-player').src = 'https:\/\/www.youtube.com\/embed\/' + videoId + '?rel=0&autoplay=1&modestbranding=1';\r\n document.getElementById('player-title').textContent = title;\r\n var s = cat ? 'background:' + cat.color + '12;color:' + cat.color : 'background:rgba(196,122,10,.08);color:var(--brand)';\r\n document.getElementById('player-meta').innerHTML = '<span class=\"player-cat-badge\" style=\"' + s + '\">' + (cat ? cat.name : catId) + '<\/span>';\r\n renderGrid();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\nfunction playAllPlaylist() {\r\n var cat = getCat(currentCategory);\r\n if (!cat || !cat.playlistId) return;\r\n document.getElementById('yt-player').src = 'https:\/\/www.youtube.com\/embed\/videoseries?list=' + cat.playlistId + '&rel=0&autoplay=1&modestbranding=1';\r\n document.getElementById('player-title').textContent = cat.name + ' \u2014 Full Playlist';\r\n var s = 'background:' + cat.color + '12;color:' + cat.color;\r\n document.getElementById('player-meta').innerHTML = '<span class=\"player-cat-badge\" style=\"' + s + '\">' + cat.name + '<\/span>';\r\n currentVideoId = null;\r\n renderGrid();\r\n}\r\n\r\nfunction pickRandomVideo() {\r\n var list = getFilteredVideos();\r\n if (list.length) { var v = list[Math.floor(Math.random() * list.length)]; playVideo(v.id, v.title, v.category); }\r\n}\r\n\r\nfunction getFilteredVideos() {\r\n return ALL_VIDEOS.filter(function(v) { return v.category === currentCategory; });\r\n}\r\n\r\n\/* \u2500\u2500 RENDER GRID \u2500\u2500 *\/\r\nfunction renderGrid() {\r\n var grid = document.getElementById('video-grid');\r\n var skeleton = document.getElementById('skeleton-grid');\r\n var noRes = document.getElementById('no-results');\r\n var cat = getCat(currentCategory);\r\n var videos = getFilteredVideos();\r\n\r\n document.getElementById('grid-cat-name').textContent = cat ? cat.name : 'Videos';\r\n document.getElementById('grid-count').textContent = '(' + videos.length + ' videos)';\r\n skeleton.style.display = 'none';\r\n\r\n if (!videos.length) { grid.style.display = 'none'; noRes.style.display = ''; return; }\r\n noRes.style.display = 'none'; grid.style.display = '';\r\n\r\n grid.innerHTML = videos.map(function(v, idx) {\r\n var vCat = getCat(v.category);\r\n var bs = vCat ? 'background:' + vCat.color + '12;color:' + vCat.color : 'background:rgba(196,122,10,.08);color:var(--brand)';\r\n var isActive = v.id === currentVideoId;\r\n var thumb = v.thumbnail || ('https:\/\/img.youtube.com\/vi\/' + v.id + '\/mqdefault.jpg');\r\n return '<div class=\"video-card' + (isActive ? ' active' : '') + '\" data-vid=\"' + v.id + '\" data-title=\"' + v.title.replace(\/\"\/g,'"').replace(\/<\/g,'<') + '\" data-cat=\"' + v.category + '\">'\r\n + '<div class=\"card-thumb\">'\r\n + '<img decoding=\"async\" src=\"' + thumb + '\" alt=\"\" loading=\"lazy\" onerror=\"this.src=\\'https:\/\/img.youtube.com\/vi\/' + v.id + '\/mqdefault.jpg\\'\" \/>'\r\n + '<div class=\"card-play-overlay\"><div class=\"card-play-btn\"><\/div><\/div>'\r\n + '<span class=\"card-index\">' + (idx+1) + '<\/span>'\r\n + '<\/div>'\r\n + '<div class=\"card-body\">'\r\n + '<div class=\"card-title\">' + v.title.replace(\/<\/g,'<') + '<\/div>'\r\n + (v.date ? '<div class=\"card-date\">' + v.date + '<\/div>' : '')\r\n + '<span class=\"card-category\" style=\"' + bs + '\">' + (vCat ? vCat.name : v.category) + '<\/span>'\r\n + '<\/div><\/div>';\r\n }).join('');\r\n}\r\n\r\ndocument.getElementById('video-grid').addEventListener('click', function(e) {\r\n var card = e.target.closest('.video-card');\r\n if (!card) return;\r\n var vid = card.getAttribute('data-vid');\r\n var title = card.getAttribute('data-title');\r\n var cat = card.getAttribute('data-cat');\r\n if (vid) playVideo(vid, title, cat);\r\n});\r\n\r\n\/* \u2500\u2500 REFRESH \u2500\u2500 *\/\r\nasync function refreshAll() {\r\n var btn = document.getElementById('btn-refresh');\r\n btn.classList.add('spinning');\r\n document.getElementById('skeleton-grid').style.display = '';\r\n document.getElementById('video-grid').style.display = 'none';\r\n document.getElementById('no-results').style.display = 'none';\r\n setStatus('loading', 'Refreshing videos from YouTube\u2026');\r\n await fetchAllVideos();\r\n renderTabs(); renderGrid(); playAllPlaylist();\r\n btn.classList.remove('spinning');\r\n updateHeroCount();\r\n if (fetchErrors.length) setStatus('err', 'Some playlists failed: ' + fetchErrors.join('; '));\r\n else setStatus('ok', 'Loaded ' + ALL_VIDEOS.length + ' videos from ' + CATEGORIES.length + ' playlists');\r\n}\r\n\r\nfunction updateHeroCount() {\r\n var el = document.getElementById('hero-video-count');\r\n if (el) el.textContent = ALL_VIDEOS.length;\r\n}\r\n\r\n\/* \u2500\u2500 INIT \u2500\u2500 *\/\r\n(async function init() {\r\n \/\/ Set Subscribe button link (uses YouTube handle format)\r\n var subBtn = document.getElementById('btn-subscribe');\r\n if (subBtn) subBtn.href = 'https:\/\/www.youtube.com\/' + CHANNEL_HANDLE + '?sub_confirmation=1';\r\n\r\n \/\/ Set Quote button link\r\n var quoteBtn = document.getElementById('btn-quote');\r\n if (quoteBtn) quoteBtn.href = QUOTE_LINK;\r\n\r\n setStatus('loading', 'Loading videos from YouTube\u2026');\r\n renderTabs(); playAllPlaylist();\r\n await fetchAllVideos();\r\n renderTabs(); renderGrid(); updateHeroCount();\r\n if (fetchErrors.length) setStatus('err', 'Some playlists failed: ' + fetchErrors.join('; '));\r\n else setStatus('ok', 'Loaded ' + ALL_VIDEOS.length + ' videos from ' + CATEGORIES.length + ' playlists');\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Believe Industry \u2014 Centro de v\u00eddeo Believe Industry M\u00e1quinas en acci\u00f3n Vea nuestras m\u00e1quinas perfiladoras, soluciones solares y equipos industriales en funcionamiento. Im\u00e1genes reales de nuestra planta de producci\u00f3n y de las instalaciones de nuestros clientes en todo el mundo. \u2014 V\u00eddeos Actualizar Cargando v\u00eddeos de YouTube\u2026 Cargando lista de reproducci\u00f3n\u2026 Reproducir todo Aleatorio Suscr\u00edbete a nuestro canal Solicita un presupuesto V\u00eddeos No se encontraron v\u00eddeos.<\/p>","protected":false},"author":2,"featured_media":1572,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"footnotes":"","big_sky_generated":false},"tags":[],"class_list":["post-1272","page","type-page","status-publish","has-post-thumbnail","hentry"],"blocksy_meta":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P9K5n8-kw","jetpack_likes_enabled":false,"jetpack-related-posts":[{"id":22918,"url":"https:\/\/believeindustry.company\/es\/buyer-guide\/","url_meta":{"origin":1272,"position":0},"title":"Gu\u00edas de compra de m\u00e1quinas perfiladoras","author":"Believe Industry Group","date":"junio 13, 2026","format":false,"excerpt":"Gu\u00eda de compra de m\u00e1quinas perfiladoras: Gu\u00edas y comparaciones de expertos | Believe Industry Live Feed Gu\u00edas de compra de m\u00e1quinas perfiladoras Todo lo que necesita saber antes de realizar un pedido. Consejos pr\u00e1cticos basados en m\u00e1s de 20 a\u00f1os de experiencia en fabricaci\u00f3n: sin rodeos, solo lo importante. -- Gu\u00edas 2026 Actualizadas hace m\u00e1s de 20 a\u00f1os\u2026","rel":"","context":"Entrada similar","block_context":{"text":"Entrada similar","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":345,"url":"https:\/\/believeindustry.company\/es\/faqs\/","url_meta":{"origin":1272,"position":1},"title":"Preguntas frecuentes","author":"Believe Industry Group","date":"marzo 16, 2018","format":false,"excerpt":"Believe Industry Company - Preguntas frecuentes BELI ROLLFORMING \u2014 Preguntas frecuentes Believe Industry Company | Fabricante de m\u00e1quinas de conformado en fr\u00edo con certificaci\u00f3n ISO y CE | M\u00e1s de 15 a\u00f1os de experiencia | M\u00e1s de 50 pa\u00edses Productos de la empresa Tecnolog\u00eda Servicio Pedidos Contacto M\u00e1s de 15 a\u00f1os de experiencia M\u00e1s de 80 ingenieros y personal M\u00e1s de 50 pa\u00edses de exportaci\u00f3n M\u00e1s de 500 proyectos entregados Resumen de la empresa 01 \u00bfQu\u00e9 tipo de empresa\u2026","rel":"","context":"Entrada similar","block_context":{"text":"Entrada similar","link":""},"img":{"alt_text":"pexels-photo-356079","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3116,"url":"https:\/\/believeindustry.company\/es\/request-a-quote\/","url_meta":{"origin":1272,"position":2},"title":"Solicitar presupuesto","author":"Believe Industry Group","date":"octubre 8, 2018","format":false,"excerpt":"Solicite un presupuesto | Believe Industry Company \u2014 Precios y propuestas para m\u00e1quinas perfiladoras personalizadas Ir al contenido principal Inicio \/ Solicite un presupuesto Obtenga precios Solicite un presupuesto para su m\u00e1quina perfiladora Complete sus requisitos y nuestro equipo de ingenier\u00eda preparar\u00e1 una propuesta detallada y competitiva en 24\u201348\u2026","rel":"","context":"Entrada similar","block_context":{"text":"Entrada similar","link":""},"img":{"alt_text":"request a quote","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":7645,"url":"https:\/\/believeindustry.company\/es\/about-believe-industry\/","url_meta":{"origin":1272,"position":3},"title":"Acerca de la industria Believe","author":"Believe Industry Group","date":"agosto 11, 2020","format":false,"excerpt":"Acerca de Believe Industry | Fabricante mundial de m\u00e1quinas perfiladoras desde 2005 \u00b7 Empresa global Believe Industry Perfilamos el futuro Un fabricante mundial de m\u00e1quinas perfiladoras con m\u00e1s de 20 a\u00f1os de excelencia en ingenier\u00eda. Desde nuestras instalaciones de 10\u00a0000 m\u00b2 en Wuxi, China, ofrecemos soluciones de perfilado de precisi\u00f3n a clientes de todo el mundo\u2026","rel":"","context":"Entrada similar","block_context":{"text":"Entrada similar","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21105,"url":"https:\/\/believeindustry.company\/es\/metal-coil-calculator\/","url_meta":{"origin":1272,"position":4},"title":"Calculadora gratuita de bobinas met\u00e1licas","author":"Believe Industry Group","date":"marzo 20, 2026","format":false,"excerpt":"Believe Industry Company (Beli Rollforming) - Calculadora de bobinas met\u00e1licas Believe Industry Company (Beli Rollforming) \ud83d\udcde +86 18616927760 | \u2709\ufe0f Enquiry@believeindustry.com | \ud83c\udf10 believeindustry.company Calculadora de bobinas met\u00e1licas Material Acero al carbono Acero inoxidable Aluminio Cobre Modo 1: Peso conocido Modo 2: Di\u00e1metros conocidos Ancho de la bobina (mm) Espesor de la bobina (mm) Peso de la bobina (kg)\u2026","rel":"","context":"Entrada similar","block_context":{"text":"Entrada similar","link":""},"img":{"alt_text":"Metal Coil Calculator","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":659,"url":"https:\/\/believeindustry.company\/es\/roll-forming-machine\/purlin-roll-forming-machine\/c-z-purlin-roll-forming-machine\/","url_meta":{"origin":1272,"position":5},"title":"M\u00e1quina perfiladora de correas CZ","author":"Believe Industry Group","date":"marzo 24, 2018","format":false,"excerpt":"La m\u00e1quina perfiladora de correas C y Z est\u00e1 dise\u00f1ada para producir correas C y Z con un tiempo de cambio m\u00ednimo. Gracias a su nuevo dise\u00f1o tecnol\u00f3gico, el tiempo de cambio es de tan solo 2 minutos. El precio de nuestra m\u00e1quina perfiladora de correas C y Z de \u00faltima generaci\u00f3n ronda los 35000$ EXW de f\u00e1brica. Cont\u00e1ctenos para m\u00e1s informaci\u00f3n. Believe Industry\u2026","rel":"","context":"En \u00abCompany News\u00bb","block_context":{"text":"Company News","link":"https:\/\/believeindustry.company\/es\/category\/company-news\/"},"img":{"alt_text":"A wide shot displaying the entire integrated C Z Purlin Roll Forming Machine production line, showcasing all components from decoiling to final cut-off in a professional factory setting.","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2025\/12\/high-speed-c-z-purlin-roll-forming-machine.webp?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2025\/12\/high-speed-c-z-purlin-roll-forming-machine.webp?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2025\/12\/high-speed-c-z-purlin-roll-forming-machine.webp?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2025\/12\/high-speed-c-z-purlin-roll-forming-machine.webp?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/pages\/1272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":35,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":22983,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/pages\/1272\/revisions\/22983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/media\/1572"}],"wp:attachment":[{"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/believeindustry.company\/es\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}