{"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":"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 Video Merkezi Believe Industry Makineleri \u00c7al\u0131\u015f\u0131rken Rulo \u015fekillendirme makinelerimizi, g\u00fcne\u015f enerjisi \u00e7\u00f6z\u00fcmlerimizi ve end\u00fcstriyel ekipmanlar\u0131m\u0131z\u0131 \u00e7al\u0131\u015f\u0131rken izleyin. Fabrikam\u0131zdan ve d\u00fcnya \u00e7ap\u0131ndaki m\u00fc\u015fteri sahalar\u0131m\u0131zdan ger\u00e7ek g\u00f6r\u00fcnt\u00fcler. \u2014 Videolar Yenile YouTube'dan videolar y\u00fckleniyor\u2026 Oynatma listesi y\u00fckleniyor\u2026 T\u00fcm\u00fcn\u00fc oynat Rastgele Kanal\u0131m\u0131za abone olun Teklif isteyin Videolar Video bulunamad\u0131.<\/p>","protected":false},"author":2,"featured_media":1572,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_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,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"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":285,"url":"https:\/\/believeindustry.company\/tr\/contact\/","url_meta":{"origin":1272,"position":0},"title":"\u0130leti\u015fim","author":"Believe Industry Group","date":"A\u011fustos 17, 2020","format":false,"excerpt":"Get In Touch Let's Engineer Your Roll Forming Line Tell us your profile, material, and production target. Our engineers reply with a tailored proposal within 24 hours. 15+ Years Experience Exported to 60+ Countries ISO-Certified Factory 24-Hour Reply Talk to Our Team Two offices in China, serving customers worldwide. Reach\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":"Rulo \u015eekillendirme Makinesi Al\u0131c\u0131 Rehberi Merkezi \u2014 Uzman Sat\u0131n Alma Rehberleri ve Kar\u015f\u0131la\u015ft\u0131rmalar\u0131 | Believe Industry Canl\u0131 Yay\u0131n Rulo \u015eekillendirme Makinesi Al\u0131c\u0131 Rehberleri Sipari\u015f vermeden \u00f6nce bilmeniz gereken her \u015fey. 20 y\u0131l\u0131 a\u015fk\u0131n \u00fcretim deneyiminden ger\u00e7ek d\u00fcnya tavsiyeleri \u2014 gereksiz bilgiler yok, sadece \u00f6nemli olanlar. -- Rehberler 2026 G\u00fcncellendi 20+ Y\u0131l\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3116,"url":"https:\/\/believeindustry.company\/tr\/request-a-quote\/","url_meta":{"origin":1272,"position":2},"title":"Fiyat teklifi isteyin","author":"Believe Industry Group","date":"Ekim 8, 2018","format":false,"excerpt":"Fiyat Teklifi \u0130steyin | Believe Industry Company \u2014 \u00d6zel Rulo \u015eekillendirme Makinesi Fiyatland\u0131rmas\u0131 ve Teklifi Ana i\u00e7eri\u011fe git Anasayfa \/ Fiyat Teklifi \u0130steyin Fiyat Al\u0131n Rulo \u015eekillendirme Makineniz \u0130\u00e7in Fiyat Teklifi \u0130steyin Gereksinimlerinizi doldurun ve m\u00fchendislik ekibimiz 24-48 saat i\u00e7inde detayl\u0131, rekabet\u00e7i bir teklif haz\u0131rlayacakt\u0131r\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","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\/tr\/about-believe-industry\/","url_meta":{"origin":1272,"position":3},"title":"Believe Industry Hakk\u0131nda","author":"Believe Industry Group","date":"A\u011fustos 11, 2020","format":false,"excerpt":"Believe Industry Hakk\u0131nda | 2005'ten Beri K\u00fcresel Rulo \u015eekillendirme Makinesi \u00dcreticisi \u00b7 K\u00fcresel \u00dcretici Believe Industry \u015eirketi Gelece\u011fi Rulo \u015eekillendiriyoruz 20 y\u0131l\u0131 a\u015fk\u0131n m\u00fchendislik m\u00fckemmelli\u011fine sahip, d\u00fcnya standartlar\u0131nda bir rulo \u015fekillendirme makinesi \u00fcreticisi. \u00c7in'in Wuxi \u015fehrindeki 10.000 m\u00b2'lik tesisimizden, m\u00fc\u015fterilerimize hassas rulo \u015fekillendirme \u00e7\u00f6z\u00fcmleri sunuyoruz\u2026","rel":"","context":"Benzer yaz\u0131","block_context":{"text":"Benzer yaz\u0131","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21105,"url":"https:\/\/believeindustry.company\/tr\/metal-coil-calculator\/","url_meta":{"origin":1272,"position":4},"title":"\u00dccretsiz Metal Rulo Hesaplay\u0131c\u0131","author":"Believe Industry Group","date":"Mart 20, 2026","format":false,"excerpt":"Believe Industry Company (Beli Rollforming) - Metal Bobin Hesaplay\u0131c\u0131 Believe Industry Company (Beli Rollforming) \ud83d\udcde +86 18616927760 | \u2709\ufe0f Enquiry@believeindustry.com | \ud83c\udf10 believeindustry.company Metal Bobin Hesaplay\u0131c\u0131 Malzeme Karbon \u00c7elik Paslanmaz \u00c7elik Al\u00fcminyum Bak\u0131r Mod 1: Bilinen A\u011f\u0131rl\u0131k Mod 2: Bilinen \u00c7aplar Bobin Geni\u015fli\u011fi (mm) Bobin Kal\u0131nl\u0131\u011f\u0131 (mm) Bobin A\u011f\u0131rl\u0131\u011f\u0131 (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":5},"title":"C Z Purlin Rulo \u015eekillendirme Makinesi","author":"Believe Industry Group","date":"Mart 24, 2018","format":false,"excerpt":"C ve Z a\u015f\u0131k profillerini daha k\u0131sa de\u011fi\u015fim s\u00fcreleriyle \u00fcretmek i\u00e7in tasarlanm\u0131\u015f C ve Z a\u015f\u0131k profilleri b\u00fckme makinesi. BELI\u00ae'nin yeni teknoloji tasar\u0131m\u0131 sayesinde de\u011fi\u015fim s\u00fcresi sadece 2 dakika. En yeni tasar\u0131m C ve Z a\u015f\u0131k profilleri b\u00fckme makinemizin fiyat\u0131 fabrika \u00e7\u0131k\u0131\u015f fiyat\u0131 olarak yakla\u015f\u0131k 35000$'dir. Daha fazla bilgi i\u00e7in bizimle ileti\u015fime ge\u00e7in. 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":[]}],"_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}]}}