{"id":6040,"date":"2026-06-14T00:00:18","date_gmt":"2026-06-14T00:00:18","guid":{"rendered":"https:\/\/viewari.com\/?page_id=6040"},"modified":"2026-06-14T05:10:12","modified_gmt":"2026-06-14T05:10:12","slug":"title","status":"publish","type":"page","link":"https:\/\/viewari.com\/youtube\/title\/","title":{"rendered":"YouTube Title Viewer &#8211; Extract SEO Video Titles Quickly"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6040\" class=\"elementor elementor-6040\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38352465 e-con-full e-flex e-con e-parent\" data-id=\"38352465\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91eeffe elementor-widget elementor-widget-shortcode\" data-id=\"91eeffe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* \r\n         * FIX: Restored the global reset. This is crucial for removing the default\r\n         * body margin that was breaking the full-page background. This is a\r\n         * common and safe reset.\r\n         *\/\r\n        .yttv-wrapper * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* \r\n         * The main wrapper styles for encapsulation,\r\n         * ensuring the background and font settings don't leak globally\r\n         * beyond the component itself.\r\n         *\/\r\n        .yttv-wrapper {\r\n            font-family: 'Inter', sans-serif;\r\n            \r\n      background: hsla(159, 82%, 55%, 1);\r\n\r\nbackground: linear-gradient(90deg, hsla(159, 82%, 55%, 1) 0%, hsla(206, 98%, 48%, 1) 100%);\r\n\r\nbackground: -moz-linear-gradient(90deg, hsla(159, 82%, 55%, 1) 0%, hsla(206, 98%, 48%, 1) 100%);\r\n\r\nbackground: -webkit-linear-gradient(90deg, hsla(159, 82%, 55%, 1) 0%, hsla(206, 98%, 48%, 1) 100%);\r\n\r\nfilter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#2FEAA8\", endColorstr=\"#028CF3\", GradientType=1 );\r\n            color: #ffffff;\r\n           \r\n            line-height: 1.5;\r\n            font-size: 30px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .yttv-container {\r\n            max-width: 64%;\r\n            margin: 0 auto;\r\n            padding: 100px 16px; \r\n        }\r\n\r\n        \/* Header *\/\r\n        .yttv-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n            padding: 30px 0;\r\n        }\r\n\r\n        .yttv-logo-container {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .yttv-logo {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: linear-gradient(135deg, #ff6b6b, #ee5a52, #ff4757, #ff3838);\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4);\r\n        }\r\n\r\n        .yttv-youtube-icon {\r\n            width: 28px;\r\n            height: 28px;\r\n            fill: white;\r\n        }\r\n\r\n        .yttv-title {\r\n            font-size: 2.2rem;\r\n            font-weight: 800;\r\n            background: linear-gradient(135deg, #ffffff, #f1f2f6, #e3f2fd, #bbdefb);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .yttv-subtitle {\r\n            font-size: 1rem;\r\n            color: rgba(255, 255, 255, 0.8);\r\n            font-weight: 500;\r\n        }\r\n\r\n        \/* Input Section *\/\r\n        .yttv-input-section {\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));\r\n            backdrop-filter: blur(20px);\r\n            border-radius: 20px;\r\n            padding: 30px;\r\n            margin-bottom: 30px;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .yttv-input-title {\r\n            font-size: 1.3rem;\r\n            font-weight: 700;\r\n            color: white;\r\n            margin-bottom: 15px;\r\n            text-align: center;\r\n        }\r\n\r\n        .yttv-input-group {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n     .yttv-input-field {\r\n\tflex: 1;\r\n\tpadding: 14px 18px;\r\n\tborder: 2px solid rgba(255, 255, 255, 0.2);\r\n\tborder-radius: 12px;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tcolor: #1b5071;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\ttransition: all 0.3s ease;\r\n\tfont-family: 'Inter', sans-serif;\r\n}\r\n\r\n        .yttv-input-field:focus {\r\n            outline: none;\r\n            border-color: #5f27cd;\r\n            background: rgba(255, 255, 255, 0.15);\r\n        }\r\n\r\n        .yttv-input-field::placeholder {\r\n            color: rgba(255, 255, 255, 0.6);\r\n        }\r\n\r\n        .yttv-btn {\r\n            padding: 14px 20px;\r\n            border: none;\r\n            border-radius: 12px;\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            font-family: 'Inter', sans-serif;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .yttv-btn-paste {\r\n            background: linear-gradient(135deg, #5f27cd, #341f97, #2e1065, #1e1b4b);\r\n            color: white;\r\n            box-shadow: 0 4px 15px rgba(95, 39, 205, 0.4);\r\n        }\r\n\r\n        .yttv-btn-paste:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(95, 39, 205, 0.4);\r\n        }\r\n\r\n     .yttv-btn-find {\r\n\tbackground: linear-gradient(135deg, #2a82a4, #4b7cb9, #2e86de, #1e90ff);\r\n\tcolor: white;\r\n\twidth: 100%;\r\n\tjustify-content: center;\r\n\tpadding: 16px;\r\n\tfont-size: 16px;\r\n\tfont-weight: 700;\r\n\tbox-shadow: 0 4px 15px rgba(0, 210, 211, 0.4);\r\n}\r\n\r\n        .yttv-btn-find:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(0, 210, 211, 0.4);\r\n        }\r\n\r\n        .yttv-btn:disabled {\r\n            opacity: 0.6;\r\n            cursor: not-allowed;\r\n            transform: none !important;\r\n        }\r\n\r\n        .yttv-btn-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        \/* Loading *\/\r\n        .yttv-loading {\r\n            display: none;\r\n            text-align: center;\r\n            padding: 40px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(20px);\r\n            border-radius: 20px;\r\n            margin-bottom: 30px;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        .yttv-loading-spinner {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 3px solid rgba(255, 255, 255, 0.3);\r\n            border-top: 3px solid #00d2d3;\r\n            border-radius: 50%;\r\n            animation: yttv-spin 1s linear infinite;\r\n            margin: 0 auto 20px;\r\n        }\r\n\r\n        .yttv-loading-text {\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            color: white;\r\n        }\r\n\r\n        \/* Results *\/\r\n        .yttv-results {\r\n            display: none;\r\n        }\r\n\r\n        .yttv-video-card {\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));\r\n            backdrop-filter: blur(20px);\r\n            border-radius: 20px;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n            overflow: hidden;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        \/* Video Header *\/\r\n        .yttv-video-header {\r\n            padding: 25px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n        }\r\n\r\n        .yttv-thumbnail-container {\r\n            position: relative;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            aspect-ratio: 16\/9;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .yttv-thumbnail {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n        .yttv-video-info .yttv-video-title {\r\n            font-size: 1.4rem;\r\n            font-weight: 700;\r\n            color: white;\r\n            margin-bottom: 15px;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .yttv-channel-info {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            padding: 15px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border-radius: 12px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .yttv-channel-avatar {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: linear-gradient(135deg, #ff4757, #ff3838, #ff2d55, #ff1744);\r\n            border-radius: 10px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .yttv-channel-icon {\r\n            width: 20px;\r\n            height: 20px;\r\n            fill: white;\r\n        }\r\n\r\n        .yttv-channel-details .yttv-channel-name {\r\n            font-size: 1rem;\r\n            font-weight: 600;\r\n            color: white;\r\n            margin-bottom: 2px;\r\n        }\r\n\r\n        .yttv-channel-link {\r\n            color: #00d2d3;\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .yttv-channel-link:hover {\r\n            color: #54a0ff;\r\n        }\r\n\r\n        .yttv-verified-text {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.85rem;\r\n        }\r\n\r\n        \/* Stats Grid *\/\r\n        .yttv-stats-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n            gap: 15px;\r\n        }\r\n\r\n        .yttv-stat-card {\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));\r\n            border-radius: 12px;\r\n            padding: 15px;\r\n            text-align: center;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .yttv-stat-card:hover {\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        .yttv-stat-icon {\r\n            width: 24px;\r\n            height: 24px;\r\n            margin: 0 auto 8px;\r\n            padding: 6px;\r\n            border-radius: 8px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .yttv-stat-card.yttv-views .yttv-stat-icon {\r\n            background: linear-gradient(135deg, #54a0ff, #2e86de, #1e90ff, #007bff);\r\n        }\r\n\r\n        .yttv-stat-card.yttv-likes .yttv-stat-icon {\r\n            background: linear-gradient(135deg, #ff6b6b, #ee5a52, #ff4757, #ff3838);\r\n        }\r\n\r\n        .yttv-stat-card.yttv-published .yttv-stat-icon {\r\n            background: linear-gradient(135deg, #5f27cd, #341f97, #2e1065, #1e1b4b);\r\n        }\r\n      \r\n      .yttv-channel-link {\r\n\tcolor: #2a7f80;\r\n\ttext-decoration: none;\r\n\tfont-weight: 600;\r\n}\r\n\r\n        .yttv-stat-icon svg {\r\n            width: 12px;\r\n            height: 12px;\r\n            fill: white;\r\n        }\r\n\r\n        .yttv-stat-label {\r\n            font-size: 0.75rem;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        .yttv-stat-value {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            color: white;\r\n        }\r\n\r\n        \/* Title Section *\/\r\n        .yttv-title-section {\r\n            padding: 25px;\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .yttv-section-header {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            margin-bottom: 20px;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n\r\n        .yttv-section-title {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n        }\r\n\r\n        .yttv-section-icon {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: linear-gradient(135deg, #5f27cd, #341f97, #2e1065, #1e1b4b);\r\n            border-radius: 10px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .yttv-section-icon svg {\r\n            width: 20px;\r\n            height: 20px;\r\n            fill: white;\r\n        }\r\n\r\n        .yttv-section-title-text .yttv-section-title-heading {\r\n            font-size: 1.2rem;\r\n            font-weight: 700;\r\n            color: white;\r\n            margin-bottom: 2px;\r\n        }\r\n\r\n        .yttv-section-title-text p {\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 255, 255, 0.7);\r\n        }\r\n\r\n        .yttv-copy-btn {\r\n            background: linear-gradient(135deg, #00d2d3, #54a0ff, #2e86de, #1e90ff);\r\n            color: white;\r\n            border: none;\r\n            padding: 10px 16px;\r\n            border-radius: 10px;\r\n            cursor: pointer;\r\n            font-weight: 600;\r\n            font-size: 0.9rem;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .yttv-copy-btn:hover {\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .yttv-copy-btn.yttv-copied {\r\n            background: linear-gradient(135deg, #2ed573, #1e90ff);\r\n        }\r\n\r\n        .yttv-copy-icon {\r\n            width: 14px;\r\n            height: 14px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .yttv-title-content {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            padding: 20px;\r\n            border-radius: 12px;\r\n            border-left: 4px solid #5f27cd;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            line-height: 1.6;\r\n            font-size: 0.9rem;\r\n            white-space: pre-wrap;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        \/* Error State *\/\r\n        .yttv-error {\r\n            background: rgba(255, 107, 107, 0.1);\r\n            backdrop-filter: blur(20px);\r\n            border-radius: 20px;\r\n            padding: 30px;\r\n            border: 1px solid rgba(255, 107, 107, 0.2);\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .yttv-error-icon {\r\n            font-size: 3rem;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .yttv-error .yttv-error-title {\r\n            font-size: 1.3rem;\r\n            font-weight: 700;\r\n            color: #ff6b6b;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .yttv-error .yttv-error-message {\r\n            font-size: 0.95rem;\r\n            color: rgba(255, 107, 107, 0.8);\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .yttv-error .yttv-error-details {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.85rem;\r\n        }\r\n\r\n        \/* Features Grid *\/\r\n        .yttv-features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\r\n            gap: 15px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .yttv-feature-card {\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));\r\n            backdrop-filter: blur(20px);\r\n            border-radius: 12px;\r\n            padding: 20px;\r\n            text-align: center;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .yttv-feature-card:hover {\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .yttv-feature-icon {\r\n            font-size: 1.8rem;\r\n            margin-bottom: 8px;\r\n            display: block;\r\n        }\r\n\r\n        .yttv-feature-text {\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            color: white;\r\n        }\r\n\r\n        \/* Animations *\/\r\n        @keyframes yttv-spin {\r\n            to {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n\t\t\t\r\n\t\t\t.yttv-input-field {\r\n\tflex: 1;\r\n\tpadding: 14px 18px !important;\r\n\tborder: 2px solid rgba(255, 255, 255, 0.2) !important;\r\n\tborder-radius: 12px;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tcolor: #1b5071;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\ttransition: all 0.3s ease;\r\n\tfont-family: 'Inter', sans-serif;\r\n}\r\n\t\t\t\r\n\t\t\tinput.text, input.title, input[type=\"email\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"text\"], select, textarea {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n        \/* \r\n         * FIX: Custom Scrollbar styles are scoped to wrapper.\r\n         * Prefixing them with wrapper class prevents them from applying to the main\r\n         * document scrollbar. This change makes them work as intended again.\r\n         *\/\r\n        .yttv-wrapper ::-webkit-scrollbar {\r\n            width: 6px;\r\n        }\r\n\r\n        .yttv-wrapper ::-webkit-scrollbar-track {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        .yttv-wrapper ::-webkit-scrollbar-thumb {\r\n            background: linear-gradient(135deg, #5f27cd, #341f97, #2e1065, #1e1b4b);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .yttv-container {\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-title {\r\n                font-size: 1.8rem;\r\n            }\r\n\r\n            .yttv-input-group {\r\n                flex-direction: column;\r\n            }\r\n\r\n            .yttv-input-section,\r\n            .yttv-loading,\r\n            .yttv-error {\r\n                padding: 20px;\r\n            }\r\n\r\n            .yttv-video-header {\r\n                padding: 20px;\r\n            }\r\n\t\t\t\t\t.yttv-title {\r\n\tfont-size: 1.3rem;\r\n\tmargin-top: 40px;\r\n}\r\n        }\r\n\r\n        \/* Search Again Button *\/\r\n        .yttv-search-again-section {\r\n            padding: 25px;\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n            text-align: center;\r\n        }\r\n\r\n        .yttv-btn-search-again {\r\n            background: linear-gradient(135deg, #ff6b6b, #ee5a52, #ff4757, #ff3838);\r\n            color: white;\r\n            border: none;\r\n            padding: 14px 24px;\r\n            border-radius: 12px;\r\n            cursor: pointer;\r\n            font-weight: 600;\r\n            font-size: 1rem;\r\n            transition: all 0.3s ease;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);\r\n        }\r\n\r\n        .yttv-btn-search-again:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);\r\n        }\r\n\r\n        .yttv-search-again-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n        }\r\n      \r\n              @media (max-width: 991px) {\r\n            .yttv-container {\r\n                max-width: 720px;\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-title {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .yttv-subtitle {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-input-section,\r\n            .yttv-loading,\r\n            .yttv-error {\r\n                padding: 25px;\r\n            }\r\n\r\n            .yttv-input-title {\r\n                font-size: 1.2rem;\r\n            }\r\n\r\n            .yttv-input-group {\r\n                flex-direction: column;\r\n                gap: 10px;\r\n            }\r\n\r\n            .yttv-btn {\r\n                width: 100%;\r\n                justify-content: center;\r\n            }\r\n\r\n            .yttv-video-header {\r\n                flex-direction: column;\r\n                padding: 20px;\r\n                gap: 15px;\r\n            }\r\n\r\n            .yttv-video-info .yttv-video-title {\r\n                font-size: 1.2rem;\r\n                margin-bottom: 10px;\r\n            }\r\n\r\n            .yttv-channel-info {\r\n                padding: 10px;\r\n                margin-bottom: 15px;\r\n            }\r\n\r\n            .yttv-channel-name {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-stats-grid {\r\n                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\r\n                gap: 10px;\r\n            }\r\n\r\n            .yttv-stat-card {\r\n                padding: 12px;\r\n            }\r\n\r\n            .yttv-stat-label {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-stat-value {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-section-header {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 10px;\r\n            }\r\n\r\n            .yttv-section-title-text .yttv-section-title-heading {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .yttv-copy-btn {\r\n                width: 100%;\r\n                justify-content: center;\r\n            }\r\n\r\n            .yttv-title-content {\r\n                padding: 15px;\r\n                font-size: 0.85rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-title {\r\n                font-size: 1.2rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-message {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-features-grid {\r\n                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n                gap: 10px;\r\n            }\r\n\r\n            .yttv-feature-card {\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-feature-text {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-btn-search-again {\r\n                font-size: 0.9rem;\r\n                padding: 12px 20px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .yttv-container {\r\n                max-width: 100%;\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-title {\r\n                font-size: 1.8rem;\r\n            }\r\n\r\n            .yttv-subtitle {\r\n                font-size: 0.85rem;\r\n            }\r\n\r\n            .yttv-input-section,\r\n            .yttv-loading,\r\n            .yttv-error {\r\n                padding: 20px;\r\n            }\r\n\r\n            .yttv-input-title {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .yttv-video-info .yttv-video-title {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .yttv-stats-grid {\r\n                grid-template-columns: 1fr 1fr; \/* Two columns on smaller screens *\/\r\n            }\r\n\r\n            .yttv-section-title-text .yttv-section-title-heading {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-title-content {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-btn-find {\r\n                padding: 14px;\r\n                font-size: 15px;\r\n            }\r\n\t\t\t\t\t.yttv-title {\r\n\tfont-size: 1.3rem;\r\n\tmargin-top: 40px;\r\n}\r\n\t\t\t\t\t.yttv-logo {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n\tborder-radius: 10px;\r\n\tmargin-top: 27px;\r\n}\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .yttv-header {\r\n                padding: 20px 0;\r\n                margin-bottom: 30px;\r\n            }\r\n\r\n            .yttv-logo-container {\r\n                gap: 10px;\r\n                margin-bottom: 15px;\r\n            }\r\n\r\n            .yttv-logo {\r\n                width: 45px;\r\n                height: 45px;\r\n                border-radius: 10px;\r\n            }\r\n\r\n            .yttv-youtube-icon {\r\n                width: 25px;\r\n                height: 25px;\r\n            }\r\n\r\n            .yttv-title {\r\n                font-size: 1.6rem;\r\n            }\r\n\r\n            .yttv-subtitle {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-input-field {\r\n                padding: 12px 15px;\r\n                font-size: 13px;\r\n            }\r\n\r\n            .yttv-btn {\r\n                padding: 12px 15px;\r\n                font-size: 13px;\r\n            }\r\n\r\n            .yttv-btn-find {\r\n                padding: 14px;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .yttv-loading-spinner {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n\r\n            .yttv-loading-text {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-video-header {\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-video-info .yttv-video-title {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-channel-avatar {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n\r\n            .yttv-channel-icon {\r\n                width: 18px;\r\n                height: 18px;\r\n            }\r\n\r\n            .yttv-channel-name {\r\n                font-size: 0.85rem;\r\n            }\r\n\r\n            .yttv-verified-text {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-stats-grid {\r\n                grid-template-columns: 1fr; \/* Stack on very small screens *\/\r\n            }\r\n\r\n            .yttv-stat-card {\r\n                padding: 10px;\r\n            }\r\n\r\n            .yttv-stat-label {\r\n                font-size: 0.65rem;\r\n            }\r\n\r\n            .yttv-stat-value {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-section-icon {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n\r\n            .yttv-section-icon svg {\r\n                width: 18px;\r\n                height: 18px;\r\n            }\r\n\r\n            .yttv-section-title-text .yttv-section-title-heading {\r\n                font-size: 0.95rem;\r\n            }\r\n\r\n            .yttv-section-title-text p {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-copy-btn {\r\n                padding: 8px 12px;\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-title-content {\r\n                padding: 12px;\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-icon {\r\n                font-size: 2.5rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-title {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-message {\r\n                font-size: 0.85rem;\r\n            }\r\n\r\n            .yttv-features-grid {\r\n                grid-template-columns: 1fr 1fr;\r\n            }\r\n\r\n            .yttv-feature-card {\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-feature-text {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-btn-search-again {\r\n                font-size: 0.85rem;\r\n                padding: 10px 18px;\r\n            }\r\n\t\t\t\t\t.yttv-wrapper {\r\n\tfont-family: 'Inter', sans-serif;\r\n\tcolor: #ffffff;\r\n\tline-height: 1.5;\r\n\tfont-size: 14px;\r\n\tfont-weight: 700;\r\n}\r\n\t\t\t\t\t.yttv-title {\r\n\tfont-size: 1.3rem;\r\n\tmargin-top: 40px;\r\n}\r\n\t\t\t\t\t.yttv-logo {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n\tborder-radius: 10px;\r\n\tmargin-top: 27px;\r\n}\r\n        }\r\n\r\n        @media (max-width: 400px) {\r\n            .yttv-container {\r\n                padding: 10px;\r\n            }\r\n\r\n            .yttv-title {\r\n                font-size: 1.4rem;\r\n            }\r\n\r\n            .yttv-subtitle {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-input-section,\r\n            .yttv-loading,\r\n            .yttv-error {\r\n                padding: 15px;\r\n            }\r\n\r\n            .yttv-input-title {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-btn-paste {\r\n                padding: 10px 12px;\r\n                font-size: 12px;\r\n            }\r\n\r\n            .yttv-btn-find {\r\n                padding: 12px;\r\n                font-size: 13px;\r\n            }\r\n\r\n            .yttv-loading-spinner {\r\n                width: 30px;\r\n                height: 30px;\r\n            }\r\n\r\n            .yttv-loading-text {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-video-info .yttv-video-title {\r\n                font-size: 0.95rem;\r\n            }\r\n\r\n            .yttv-channel-name {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-verified-text {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-section-title-text .yttv-section-title-heading {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-section-title-text p {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-copy-btn {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-title-content {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-title {\r\n                font-size: 1rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-message {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-features-grid {\r\n                grid-template-columns: 1fr; \/* Stack on smallest screens *\/\r\n            }\r\n\r\n            .yttv-feature-card {\r\n                padding: 12px;\r\n            }\r\n\r\n            .yttv-feature-text {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-btn-search-again {\r\n                font-size: 0.8rem;\r\n                padding: 8px 15px;\r\n            }\r\n\t\t\t\t\t.yttv-wrapper {\r\n\tfont-family: 'Inter', sans-serif;\r\n\tcolor: #ffffff;\r\n\tline-height: 1.5;\r\n\tfont-size: 14px;\r\n\tfont-weight: 700;\r\n}\r\n\t\t\t\t\t.yttv-title {\r\n\tfont-size: 1.3rem;\r\n\tmargin-top: 40px;\r\n}\r\n\t\t\t\t\t.yttv-logo {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n\tborder-radius: 10px;\r\n\tmargin-top: 27px;\r\n}\r\n        }\r\n\r\n        @media (max-width: 375px) {\r\n            .yttv-title {\r\n                font-size: 1.3rem;\r\n            }\r\n\r\n            .yttv-subtitle {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-input-field {\r\n                font-size: 12px;\r\n            }\r\n\r\n            .yttv-btn-paste {\r\n                font-size: 11px;\r\n            }\r\n\r\n            .yttv-btn-find {\r\n                font-size: 12px;\r\n            }\r\n\r\n            .yttv-video-info .yttv-video-title {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .yttv-channel-name {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-verified-text {\r\n                font-size: 0.65rem;\r\n            }\r\n\r\n            .yttv-stat-label {\r\n                font-size: 0.6rem;\r\n            }\r\n\r\n            .yttv-stat-value {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .yttv-section-title-text .yttv-section-title-heading {\r\n                font-size: 0.85rem;\r\n            }\r\n\r\n            .yttv-section-title-text p {\r\n                font-size: 0.7rem;\r\n            }\r\n\r\n            .yttv-copy-btn {\r\n                font-size: 0.7rem;\r\n                padding: 7px 10px;\r\n            }\r\n\r\n            .yttv-title-content {\r\n                font-size: 0.65rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-title {\r\n                font-size: 0.95rem;\r\n            }\r\n\r\n            .yttv-error .yttv-error-message {\r\n                font-size: 0.75rem;\r\n            }\r\n\r\n            .yttv-feature-text {\r\n                font-size: 0.65rem;\r\n            }\r\n\r\n            .yttv-btn-search-again {\r\n                font-size: 0.75rem;\r\n                padding: 7px 12px;\r\n            }\r\n\t\t\t\t\t.yttv-wrapper {\r\n\tfont-family: 'Inter', sans-serif;\r\n\tcolor: #ffffff;\r\n\tline-height: 1.5;\r\n\tfont-size: 14px;\r\n\tfont-weight: 700;\r\n}\r\n\t\t\t\t\t.yttv-title {\r\n\tfont-size: 1.3rem;\r\n\tmargin-top: 40px;\r\n}\r\n\t\t\t\t\t.yttv-logo {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n\tborder-radius: 10px;\r\n\tmargin-top: 27px;\r\n}\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"yttv-wrapper\">\r\n        <div class=\"yttv-container\">\r\n            <!-- Header -->\r\n            <div class=\"yttv-header\">\r\n                <div class=\"yttv-logo-container\">\r\n                    <div class=\"yttv-logo\">\r\n                        <svg class=\"yttv-youtube-icon\" viewBox=\"0 0 24 24\">\r\n                            <path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <div>\r\n                        <h1 class=\"yttv-title\">YouTube Title Viewer<\/h1>\r\n                        <p class=\"yttv-subtitle\">Extract video titles instantly<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Features Grid -->\r\n                <div class=\"yttv-features-grid\">\r\n                    <div class=\"yttv-feature-card\">\r\n                        <span class=\"yttv-feature-icon\">\u26a1<\/span>\r\n                        <p class=\"yttv-feature-text\">Fast<\/p>\r\n                    <\/div>\r\n                    <div class=\"yttv-feature-card\">\r\n                        <span class=\"yttv-feature-icon\">\ud83d\udd12<\/span>\r\n                        <p class=\"yttv-feature-text\">Secure<\/p>\r\n                    <\/div>\r\n                    <div class=\"yttv-feature-card\">\r\n                        <span class=\"yttv-feature-icon\">\ud83d\udcf1<\/span>\r\n                        <p class=\"yttv-feature-text\">Mobile<\/p>\r\n                    <\/div>\r\n                    <div class=\"yttv-feature-card\">\r\n                        <span class=\"yttv-feature-icon\">\ud83c\udd93<\/span>\r\n                        <p class=\"yttv-feature-text\">Free<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Input Section -->\r\n            <div class=\"yttv-input-section\">\r\n                <div class=\"yttv-input-title\">Enter YouTube URL<\/div>\r\n\r\n                <div class=\"yttv-input-group\">\r\n                    <input type=\"text\" id=\"yttv-videoInput\" class=\"yttv-input-field\" placeholder=\"Paste YouTube URL here...\">\r\n                    <button class=\"yttv-btn yttv-btn-paste\" onclick=\"pasteFromClipboard()\">\r\n                        <svg class=\"yttv-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                            <path d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"><\/path>\r\n                        <\/svg>\r\n                        Paste\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <button class=\"yttv-btn yttv-btn-find\" onclick=\"findTitle()\">\r\n                    <svg class=\"yttv-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                        <path d=\"M9.5,3L8,6.5H4.5L7.91,9.91L6.5,16.5L9.5,14L12.5,16.5L11.09,9.91L14.5,6.5H11L9.5,3Z\"><\/path>\r\n                    <\/svg>\r\n                    Extract Title\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Loading State -->\r\n            <div class=\"yttv-loading\" id=\"yttv-loading\">\r\n                <div class=\"yttv-loading-spinner\"><\/div>\r\n                <p class=\"yttv-loading-text\">Processing your request...<\/p>\r\n            <\/div>\r\n\r\n            <!-- Results Container -->\r\n            <div class=\"yttv-results\" id=\"yttv-results\">\r\n                <!-- Results will be populated here -->\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<!-- ======== Content Section Start ======== -->\r\n<!-- YouTube Title Viewer - 3 Content Sections + Shortcode -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n  .ytti-s1-root {\r\n    --s1-bg: #ffffff;\r\n    --s1-card-bg: #fef0f0;\r\n    --s1-text: #0f172a;\r\n    --s1-text-soft: #334155;\r\n    --s1-text-muted: #64748b;\r\n    --s1-primary: #ff0000;\r\n    --s1-accent: #cc0000;\r\n    width: 100%;\r\n    background: var(--s1-bg);\r\n    padding: 80px 20px;\r\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  }\r\n  .ytti-s1-container { max-width: 1200px; margin: 0 auto; }\r\n  .ytti-s1-header { text-align: center; margin-bottom: 30px; }\r\n  .ytti-s1-heading { font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 16px; color: #0f172a; }\r\n  .ytti-highlight { background: linear-gradient(135deg, #cc0000 0%, #ff0000 50%, #ff4444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n  .ytti-s1-subheading { font-size: clamp(0.8rem, 2vw, 1rem); color: var(--s1-text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }\r\n  .ytti-s1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n  .ytti-s1-card { background: var(--s1-card-bg); border-radius: 10px; padding: 32px 28px; position: relative; overflow: hidden; transition: all 0.4s ease; cursor: pointer; border: 2px solid transparent; opacity: 0; animation: ytti-s1-fadeSlideUp 0.6s ease forwards; }\r\n  .ytti-s1-card:nth-child(1) { animation-delay: 0.05s; } .ytti-s1-card:nth-child(2) { animation-delay: 0.1s; } .ytti-s1-card:nth-child(3) { animation-delay: 0.15s; } .ytti-s1-card:nth-child(4) { animation-delay: 0.2s; } .ytti-s1-card:nth-child(5) { animation-delay: 0.25s; } .ytti-s1-card:nth-child(6) { animation-delay: 0.3s; }\r\n  @keyframes ytti-s1-fadeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n  .ytti-s1-card::before { content: \"\"; position: absolute; inset: 0; border-radius: 10px; padding: 2px; background: linear-gradient(90deg, var(--s1-primary), var(--s1-accent), var(--s1-primary)); background-size: 300% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; animation: ytti-s1-borderTrace 2s linear infinite; }\r\n  .ytti-s1-card:hover::before { opacity: 1; }\r\n  @keyframes ytti-s1-borderTrace { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }\r\n  .ytti-s1-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(255, 0, 0, 0.15); }\r\n  .ytti-s1-icon-wrap { width: 56px; height: 56px; background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border: 2px solid #e2e8f0; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.4s ease; }\r\n  .ytti-s1-card:hover .ytti-s1-icon-wrap { border-color: var(--s1-primary); background: linear-gradient(135deg, var(--s1-primary) 0%, var(--s1-accent) 100%); }\r\n  .ytti-s1-icon { font-size: 24px; color: var(--s1-primary); transition: all 0.4s ease; }\r\n  .ytti-s1-card:hover .ytti-s1-icon { color: #ffffff; transform: rotate(15deg) scale(1.1); }\r\n  .ytti-s1-card-title { font-size: 1.2rem; font-weight: 700; color: var(--s1-text); margin-bottom: 12px; }\r\n  .ytti-s1-card-desc { font-size: 0.95rem; color: var(--s1-text-soft); line-height: 1.6; }\r\n\r\n  .ytti-s2-root {\r\n    --s2-bg: #fef0f0;\r\n    --s2-card-bg: #ffffff;\r\n    --s2-text: #0f172a;\r\n    --s2-text-soft: #334155;\r\n    --s2-text-muted: #64748b;\r\n    --s2-primary: #ff0000;\r\n    --s2-accent: #cc0000;\r\n    width: 100%;\r\n    background: var(--s2-bg);\r\n    padding: 80px 20px;\r\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  }\r\n  .ytti-s2-container { max-width: 1200px; margin: 0 auto; }\r\n  .ytti-s2-header { text-align: center; margin-bottom: 30px; }\r\n  .ytti-s2-heading { font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 16px; color: #0f172a; }\r\n  .ytti-s2-subheading { font-size: clamp(0.8rem, 2vw, 1rem); color: var(--s2-text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }\r\n  .ytti-s2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n  .ytti-s2-card { background: var(--s2-card-bg); border-radius: 10px; padding: 32px 28px; text-align: center; position: relative; transition: all 0.4s ease; cursor: pointer; border: 1px solid #e2e8f0; opacity: 0; animation: ytti-s2-fadeSlideUp 0.6s ease forwards; }\r\n  .ytti-s2-card:nth-child(1) { animation-delay: 0.05s; } .ytti-s2-card:nth-child(2) { animation-delay: 0.1s; } .ytti-s2-card:nth-child(3) { animation-delay: 0.15s; } .ytti-s2-card:nth-child(4) { animation-delay: 0.2s; } .ytti-s2-card:nth-child(5) { animation-delay: 0.25s; } .ytti-s2-card:nth-child(6) { animation-delay: 0.3s; }\r\n  @keyframes ytti-s2-fadeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n  .ytti-s2-card::after { content: \"\"; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); opacity: 0; pointer-events: none; }\r\n  .ytti-s2-card:hover::after { animation: ytti-s2-pulseEcho 1.5s ease-out infinite; }\r\n  @keyframes ytti-s2-pulseEcho { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); opacity: 1; } 100% { box-shadow: 0 0 0 20px rgba(255, 0, 0, 0); opacity: 0; } }\r\n  .ytti-s2-card:hover { transform: translateY(-8px); }\r\n  .ytti-s2-icon-wrap { width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--s2-primary) 0%, var(--s2-accent) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }\r\n  .ytti-s2-card:hover .ytti-s2-icon-wrap { animation: ytti-s2-elasticBounce 0.6s ease; }\r\n  @keyframes ytti-s2-elasticBounce { 0% { transform: scale(1); } 30% { transform: scale(0.85) translateY(5px); } 50% { transform: scale(1.15) translateY(-10px); } 70% { transform: scale(0.95) translateY(2px); } 100% { transform: scale(1) translateY(0); } }\r\n  .ytti-s2-icon { font-size: 26px; color: #ffffff; transition: transform 0.3s ease; }\r\n  .ytti-s2-card:hover .ytti-s2-icon { transform: rotate(10deg); }\r\n  .ytti-s2-card-title { font-size: 1.2rem; font-weight: 700; color: var(--s2-text); margin-bottom: 12px; }\r\n  .ytti-s2-card-desc { font-size: 0.95rem; color: var(--s2-text-soft); line-height: 1.6; }\r\n\r\n  .ytti-s3-root {\r\n    --s3-bg: #ffffff;\r\n    --s3-card-bg: #fef0f0;\r\n    --s3-text: #0f172a;\r\n    --s3-text-soft: #334155;\r\n    --s3-text-muted: #64748b;\r\n    --s3-primary: #ff0000;\r\n    --s3-accent: #cc0000;\r\n    width: 100%;\r\n    background: var(--s3-bg);\r\n    padding: 80px 20px;\r\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  }\r\n  .ytti-s3-container { max-width: 1200px; margin: 0 auto; }\r\n  .ytti-s3-header { text-align: center; margin-bottom: 30px; }\r\n  .ytti-s3-heading { font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 16px; color: #0f172a; }\r\n  .ytti-s3-subheading { font-size: clamp(0.8rem, 2vw, 1rem); color: var(--s3-text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }\r\n  .ytti-s3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n  .ytti-s3-card { background: var(--s3-card-bg); border-radius: 10px; padding: 28px; position: relative; overflow: hidden; transition: all 0.4s ease; cursor: pointer; border: 1px solid transparent; opacity: 0; animation: ytti-s3-fadeSlideUp 0.6s ease forwards; }\r\n  .ytti-s3-card:nth-child(1) { animation-delay: 0.05s; } .ytti-s3-card:nth-child(2) { animation-delay: 0.1s; } .ytti-s3-card:nth-child(3) { animation-delay: 0.15s; } .ytti-s3-card:nth-child(4) { animation-delay: 0.2s; } .ytti-s3-card:nth-child(5) { animation-delay: 0.25s; } .ytti-s3-card:nth-child(6) { animation-delay: 0.3s; }\r\n  @keyframes ytti-s3-fadeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n  .ytti-s3-card::before { content: \"\"; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 0, 0, 0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.4s ease; left: var(--mouse-x, 50%); top: var(--mouse-y, 50%); }\r\n  .ytti-s3-card:hover::before { opacity: 1; }\r\n  .ytti-s3-card:hover { border-color: rgba(255, 0, 0, 0.3); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(255, 0, 0, 0.1); }\r\n  .ytti-s3-step-badge { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; background: linear-gradient(135deg, var(--s3-primary) 0%, var(--s3-accent) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #ffffff; transition: transform 0.3s ease; }\r\n  .ytti-s3-card:hover .ytti-s3-step-badge { transform: scale(1.2) rotate(10deg); }\r\n  .ytti-s3-icon-wrap { width: 52px; height: 52px; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: all 0.4s ease; transform-style: preserve-3d; }\r\n  .ytti-s3-card:hover .ytti-s3-icon-wrap { transform: rotateY(180deg); border-color: var(--s3-primary); background: linear-gradient(135deg, var(--s3-primary) 0%, var(--s3-accent) 100%); }\r\n  .ytti-s3-icon { font-size: 22px; color: var(--s3-primary); transition: all 0.4s ease; backface-visibility: hidden; }\r\n  .ytti-s3-card:hover .ytti-s3-icon { color: #ffffff; transform: rotateY(180deg); }\r\n  .ytti-s3-card-title { font-size: 1.1rem; font-weight: 700; color: var(--s3-text); margin-bottom: 10px; position: relative; z-index: 1; }\r\n  .ytti-s3-card-desc { font-size: 0.9rem; color: var(--s3-text-soft); line-height: 1.5; position: relative; z-index: 1; }\r\n\r\n  .ytti-shortcode {\r\n    --sc-bg: #ffffff;\r\n    --sc-border: #e2e8f0;\r\n    --sc-text: #0f172a;\r\n    --sc-text-muted: #64748b;\r\n    --sc-primary: #ff0000;\r\n    --sc-accent: #cc0000;\r\n    width: 100%;\r\n    background: var(--sc-bg);\r\n    padding: 60px 20px;\r\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  }\r\n  .ytti-shortcode-container { max-width: 1200px; margin: 0 auto; }\r\n  .ytti-shortcode-inner { border: 2px dashed var(--sc-border); border-radius: 12px; padding: 40px; text-align: center; background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); transition: border-color 0.3s ease; }\r\n  .ytti-shortcode-inner:hover { border-color: var(--sc-primary); }\r\n  .ytti-shortcode-placeholder { display: inline-block; background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: 1px; }\r\n  .ytti-shortcode-hint { margin-top: 12px; font-size: 0.9rem; color: var(--sc-text-muted); }\r\n\r\n  @media (max-width: 1024px) { .ytti-s1-grid, .ytti-s2-grid, .ytti-s3-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }\r\n  @media (max-width: 640px) { .ytti-s1-root, .ytti-s2-root, .ytti-s3-root, .ytti-shortcode { padding: 50px 10px; } .ytti-s1-grid, .ytti-s2-grid, .ytti-s3-grid { grid-template-columns: 1fr; gap: 16px; } .ytti-s1-card, .ytti-s2-card, .ytti-s3-card { padding: 28px 24px; } .ytti-shortcode-inner { padding: 24px 16px; } }\r\n<\/style>\r\n\r\n<section class=\"ytti-shortcode\">\r\n  <div class=\"ytti-shortcode-container\"><\/div>\r\n<\/section>\r\n\r\n<section class=\"ytti-s1-root\" id=\"what-is-youtube-title-viewer\">\r\n  <div class=\"ytti-s1-container\">\r\n    <div class=\"ytti-s1-header\">\r\n      <h2 class=\"ytti-s1-heading\">What Is a <span class=\"ytti-highlight\">YouTube Title Viewer<\/span>?<\/h2>\r\n      <p class=\"ytti-s1-subheading\">View, analyze, and optimize YouTube video titles<\/p>\r\n    <\/div>\r\n    <div class=\"ytti-s1-grid\">\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-heading ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">Title Display<\/h3><p class=\"ytti-s1-card-desc\">View full video titles without truncation<\/p><\/article>\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-ruler ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">Length Check<\/h3><p class=\"ytti-s1-card-desc\">See title character count and optimize length<\/p><\/article>\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-magnifying-glass ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">Keyword Scan<\/h3><p class=\"ytti-s1-card-desc\">Identify keywords used in video titles<\/p><\/article>\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-copy ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">Copy Title<\/h3><p class=\"ytti-s1-card-desc\">Copy video titles to clipboard instantly<\/p><\/article>\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-clock ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">Title History<\/h3><p class=\"ytti-s1-card-desc\">Track when titles were changed over time<\/p><\/article>\r\n      <article class=\"ytti-s1-card\"><div class=\"ytti-s1-icon-wrap\"><i class=\"fa-solid fa-chart-simple ytti-s1-icon\"><\/i><\/div><h3 class=\"ytti-s1-card-title\">SEO Score<\/h3><p class=\"ytti-s1-card-desc\">Get SEO optimization score for titles<\/p><\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ytti-s2-root\" id=\"why-use-youtube-title-viewer\">\r\n  <div class=\"ytti-s2-container\">\r\n    <div class=\"ytti-s2-header\">\r\n      <h2 class=\"ytti-s2-heading\">Why Use a <span class=\"ytti-highlight\">YouTube Title Viewer<\/span>?<\/h2>\r\n      <p class=\"ytti-s2-subheading\">Optimize titles for better search ranking and clicks<\/p>\r\n    <\/div>\r\n    <div class=\"ytti-s2-grid\">\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-ranking-star ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">Better Rankings<\/h3><p class=\"ytti-s2-card-desc\">Improve video discoverability with optimized titles<\/p><\/article>\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-bullseye ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">Click-Through<\/h3><p class=\"ytti-s2-card-desc\">Analyze what makes titles more clickable<\/p><\/article>\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-arrows-rotate ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">A\/B Testing<\/h3><p class=\"ytti-s2-card-desc\">Compare title variations for best performance<\/p><\/article>\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-lightbulb ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">Suggestions<\/h3><p class=\"ytti-s2-card-desc\">Get AI-powered title improvement suggestions<\/p><\/article>\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-magnifying-glass ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">Keyword Research<\/h3><p class=\"ytti-s2-card-desc\">Find high-performing keywords for your niche<\/p><\/article>\r\n      <article class=\"ytti-s2-card\"><div class=\"ytti-s2-icon-wrap\"><i class=\"fa-solid fa-bookmark ytti-s2-icon\"><\/i><\/div><h3 class=\"ytti-s2-card-title\">Save Templates<\/h3><p class=\"ytti-s2-card-desc\">Save effective title patterns for reuse<\/p><\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ytti-s3-root\" id=\"how-to-use-youtube-title-viewer\">\r\n  <div class=\"ytti-s3-container\">\r\n    <div class=\"ytti-s3-header\">\r\n      <h2 class=\"ytti-s3-heading\">How to Use the <span class=\"ytti-highlight\">YouTube Title Viewer<\/span>?<\/h2>\r\n      <p class=\"ytti-s3-subheading\">Analyze and optimize video titles in simple steps<\/p>\r\n    <\/div>\r\n    <div class=\"ytti-s3-grid\">\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">1<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-link ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">Enter Video URL<\/h3><p class=\"ytti-s3-card-desc\">Paste the YouTube video link to analyze<\/p><\/article>\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">2<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-heading ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">View Title<\/h3><p class=\"ytti-s3-card-desc\">See the full video title and character count<\/p><\/article>\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">3<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-chart-bar ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">Analyze<\/h3><p class=\"ytti-s3-card-desc\">Review keyword usage and SEO analysis<\/p><\/article>\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">4<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-lightbulb ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">Get Tips<\/h3><p class=\"ytti-s3-card-desc\">Receive suggestions for title improvements<\/p><\/article>\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">5<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-copy ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">Copy Title<\/h3><p class=\"ytti-s3-card-desc\">Copy the title or analysis results<\/p><\/article>\r\n      <article class=\"ytti-s3-card\"><span class=\"ytti-s3-step-badge\">6<\/span><div class=\"ytti-s3-icon-wrap\"><i class=\"fa-solid fa-floppy-disk ytti-s3-icon\"><\/i><\/div><h3 class=\"ytti-s3-card-title\">Save Analysis<\/h3><p class=\"ytti-s3-card-desc\">Save title analysis for future reference<\/p><\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  (function () {\r\n    var cards = document.querySelectorAll(\".ytti-s3-card\");\r\n    cards.forEach(function (card) {\r\n      card.addEventListener(\"mousemove\", function (e) {\r\n        var rect = card.getBoundingClientRect();\r\n        var x = ((e.clientX - rect.left) \/ rect.width) * 100;\r\n        var y = ((e.clientY - rect.top) \/ rect.height) * 100;\r\n        card.style.setProperty(\"--mouse-x\", x + \"%\");\r\n        card.style.setProperty(\"--mouse-y\", y + \"%\");\r\n      });\r\n    });\r\n  })();\r\n<\/script><\/div>\n\t\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":"","protected":false},"author":3,"featured_media":0,"parent":5410,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"footnotes":""},"class_list":["post-6040","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/pages\/6040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/comments?post=6040"}],"version-history":[{"count":4,"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/pages\/6040\/revisions"}],"predecessor-version":[{"id":6046,"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/pages\/6040\/revisions\/6046"}],"up":[{"embeddable":true,"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/pages\/5410"}],"wp:attachment":[{"href":"https:\/\/viewari.com\/wp-json\/wp\/v2\/media?parent=6040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}