{"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\/tr\/video\/","title":{"rendered":"V\u0130DEO"},"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 Video Hub Believe Industry Machines in Action Watch our roll forming machines, solar solutions, and industrial equipment in operation. Real footage from our factory floor and customer sites worldwide. \u2014 Videos Refresh Loading videos from YouTube\u2026 Loading playlist\u2026 Play all Random Subscribe our channel Request a quote Videos No videos found.<\/p>","protected":false},"author":2,"featured_media":1572,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":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":7645,"url":"https:\/\/believeindustry.company\/tr\/about-believe-industry\/","url_meta":{"origin":1272,"position":0},"title":"Believe Industry Hakk\u0131nda","author":"Believe Industry Group","date":"A\u011fustos 11, 2020","format":false,"excerpt":"About Believe Industry | Global Roll Forming Machine Manufacturer Believe Industry Company Global Leaders in Precision Roll Forming Engineering & Coil Processing Solutions. 10,000+ Square Meter Facility 40+ Countries Exported To 20+ Years Core Expertise 2005 Year Founded A Proven Legacy in Manufacturing Believe Industry Company is a globally recognized\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22918,"url":"https:\/\/believeindustry.company\/tr\/buyer-guide\/","url_meta":{"origin":1272,"position":1},"title":"Rulo \u015eekillendirme Makinesi Sat\u0131n Alma K\u0131lavuzlar\u0131","author":"Believe Industry Group","date":"Haziran 13, 2026","format":false,"excerpt":"Roll Forming Machine Buyer's Guide Hub \u2014 Expert Buying Guides & Comparisons | Believe Industry Live Feed Roll Forming MachineBuyer's Guides Everything you need to know before placing an order. Real-world advice from 20+ years of manufacturing experience \u2014 no fluff, just what matters. -- Guides 2026 Updated 20+ Years\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":345,"url":"https:\/\/believeindustry.company\/tr\/faqs\/","url_meta":{"origin":1272,"position":2},"title":"S\u0131k\u00e7a Sorulan Sorular","author":"Believe Industry Group","date":"Mart 16, 2018","format":false,"excerpt":"Believe Industry Company - FAQ BELI ROLLFORMING \u2014 FAQ Believe Industry Company | Cold Roll Forming Machine Manufacturer ISO & CE Certified | 15+ Years | 50+ Countries Company Products Technology Service Ordering Contact 15+Years Experience 80+Engineers & Staff 50+Export Countries 500+Projects Delivered Company Overview 01 What kind of company\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","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":21105,"url":"https:\/\/believeindustry.company\/tr\/metal-coil-calculator\/","url_meta":{"origin":1272,"position":3},"title":"\u00dccretsiz Metal Bobin Hesaplay\u0131c\u0131","author":"Believe Industry Group","date":"Mart 20, 2026","format":false,"excerpt":"Believe Industry Company (Beli Rollforming) - Metal Coil Calculator Believe Industry Company (Beli Rollforming) \ud83d\udcde +86 18616927760 | \u2709\ufe0f Enquiry@believeindustry.com | \ud83c\udf10 believeindustry.company Metal Coil Calculator Material Carbon Steel Stainless Steel Aluminum Copper Mode 1: Known Weight Mode 2: Known Diameters Coil Width (mm) Coil Thickness (mm) Coil Weight (kg)\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","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\/tr\/roll-forming-machine\/purlin-roll-forming-machine\/c-z-purlin-roll-forming-machine\/","url_meta":{"origin":1272,"position":4},"title":"CZ A\u015f\u0131k Rulo \u015eekillendirme Makinesi","author":"Believe Industry Group","date":"Mart 24, 2018","format":false,"excerpt":"C \u00a0Z Purlin Roll Forming Machine is for producing C and Z Purlins with less change over time. \u00a0BELI\u00ae new technology design, exchange time is only 2 minutes. Our latest design c and z purlin machine price is only around 35000$ EXW factory. Contact us for more inforamtion. Believe Industry\u2026","rel":"","context":""Company News" i\u00e7inde","block_context":{"text":"Company News","link":"https:\/\/believeindustry.company\/tr\/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":[]},{"id":2407,"url":"https:\/\/believeindustry.company\/tr\/roll-forming-machine\/metal-sheet-roll-forming-machine\/box-profile-roofing-sheets-roll-forming-machine\/","url_meta":{"origin":1272,"position":5},"title":"Kutu Profilli \u00c7at\u0131 Levhalar\u0131 Rulo \u015eekillendirme Makinesi","author":"Believe Industry Group","date":"Temmuz 4, 2018","format":false,"excerpt":"Kutu Profilli \u00c7at\u0131 Levhalar\u0131 Rulo \u015eekillendirme Makinesi, \u0130ngiltere'de yayg\u0131n olarak kullan\u0131lan kutu profilli \u00e7at\u0131 levhalar\u0131n\u0131n \u00fcretimi i\u00e7in tasarlanm\u0131\u015ft\u0131r. Believe Industry, kutu profiller i\u00e7in eksiksiz bir rulo \u015fekillendirme makinesi yelpazesine sahiptir ve t\u00fcm makine bile\u015fenleri \u00f6zelle\u015ftirilebilir.","rel":"","context":"\"Cold Roll Forming Machine\" i\u00e7inde","block_context":{"text":"Cold Roll Forming Machine","link":"https:\/\/believeindustry.company\/tr\/tag\/cold-roll-forming-machine\/"},"img":{"alt_text":"box profile roofing sheets roll forming machine","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/07\/box-profile-roofing-sheets-roll-forming-machine.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/07\/box-profile-roofing-sheets-roll-forming-machine.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/07\/box-profile-roofing-sheets-roll-forming-machine.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/07\/box-profile-roofing-sheets-roll-forming-machine.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/pages\/1272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":35,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":22983,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/pages\/1272\/revisions\/22983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/media\/1572"}],"wp:attachment":[{"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/believeindustry.company\/tr\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}