Action Stories - YouTube Videos<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<header class=\"videos-header\">\r\n <div class=\"header-container\">\r\n <div class=\"logo-section\">\r\n <a href=\"landing.html\" class=\"logo-link\">\r\n <span class=\"action-text\">ACTION<\/span>\r\n <span class=\"stories-text\">STORIES<\/span>\r\n <\/a>\r\n <\/div>\r\n <nav class=\"videos-nav\">\r\n <a href=\"landing.html\" class=\"nav-link\">\u2190 Back to Home<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@ActionStories333\" target=\"_blank\" class=\"nav-link subscribe-link\">Subscribe<\/a>\r\n <\/nav>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"videos-hero\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"page-title\">YouTube Videos<\/h1>\r\n <p class=\"page-subtitle\">Watch behind-the-scenes content, character breakdowns, tutorials, and more from the Action Stories universe<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"all-videos-section\">\r\n <div class=\"content-container\">\r\n <h2 class=\"section-title\">All Videos<\/h2>\r\n <p class=\"section-subtitle\">Explore our complete video library<\/p>\r\n\r\n <div class=\"videos-grid\" id=\"videosGrid\">\r\n \r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"subscribe-section\">\r\n <div class=\"content-container\">\r\n <div class=\"subscribe-card\">\r\n <h2>Don't Miss Out!<\/h2>\r\n <p>Subscribe to our YouTube channel for new manga releases, exclusive content, and behind-the-scenes access<\/p>\r\n <a href=\"https:\/\/www.youtube.com\/@ActionStories333\" target=\"_blank\" class=\"subscribe-btn\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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\"\/>\r\n <\/svg>\r\n Subscribe to Channel\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer class=\"site-footer\">\r\n <div class=\"footer-container\">\r\n <div class=\"footer-content\">\r\n <div class=\"footer-brand\">\r\n <h3>ACTION STORIES<\/h3>\r\n <p>Epic manga set in the world of Azania<\/p>\r\n <\/div>\r\n\r\n <div class=\"footer-links\">\r\n <div class=\"footer-column\">\r\n <h4>Explore<\/h4>\r\n <ul>\r\n <li><a href=\"landing.html#overview\">Overview<\/a><\/li>\r\n <li><a href=\"landing.html#map\">Map of Azania<\/a><\/li>\r\n <li><a href=\"landing.html#action-stories\">Action Stories<\/a><\/li>\r\n <li><a href=\"landing.html#this-and-that\">This & That<\/a><\/li>\r\n <li><a href=\"landing.html#manga\">Read Manga<\/a><\/li>\r\n <li><a href=\"youtube-videos.html\">YouTube<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-column\">\r\n <h4>Community<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Fan Art<\/a><\/li>\r\n <li><a href=\"#\">Competitions<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-social\">\r\n <h4>Follow Us<\/h4>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" aria-label=\"Twitter\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"Instagram\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"YouTube\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <p>© 2025 Action Stories. All rights reserved.<\/p>\r\n <div class=\"footer-legal\">\r\n <a href=\"#\">Privacy Policy<\/a>\r\n <a href=\"#\">Terms of Service<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n\/* GLOBAL STYLES *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n background: #0a0a0a;\r\n color: #ffffff;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* HEADER *\/\r\n.videos-header {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\r\n border-bottom: 2px solid rgba(255, 70, 85, 0.3);\r\n padding: 20px 0;\r\n}\r\n\r\n.header-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n}\r\n\r\n.logo-link {\r\n text-decoration: none;\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n}\r\n\r\n.action-text,\r\n.stories-text {\r\n font-size: 2rem;\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.videos-nav {\r\n display: flex;\r\n gap: 20px;\r\n align-items: center;\r\n}\r\n\r\n.nav-link {\r\n color: #fff;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n}\r\n\r\n.nav-link:hover {\r\n background: rgba(255, 70, 85, 0.1);\r\n color: #ff4655;\r\n}\r\n\r\n.subscribe-link {\r\n background: #ff0000;\r\n color: white;\r\n}\r\n\r\n.subscribe-link:hover {\r\n background: #cc0000;\r\n color: white;\r\n}\r\n\r\n\/* HERO SECTION *\/\r\n.videos-hero {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);\r\n padding: 80px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.videos-hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background:\r\n radial-gradient(circle at 20% 50%, rgba(255, 70, 70, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 50%, rgba(255, 138, 0, 0.1) 0%, transparent 50%);\r\n pointer-events: none;\r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n}\r\n\r\n.page-title {\r\n font-size: 4rem;\r\n font-weight: 900;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n}\r\n\r\n.page-subtitle {\r\n font-size: 1.3rem;\r\n color: #ccc;\r\n line-height: 1.8;\r\n}\r\n\r\n\/* CONTENT CONTAINER *\/\r\n.content-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n}\r\n\r\n.section-title {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n}\r\n\r\n.section-subtitle {\r\n text-align: center;\r\n font-size: 1.2rem;\r\n color: #999;\r\n margin-bottom: 50px;\r\n}\r\n\r\n\/* ALL VIDEOS SECTION *\/\r\n.all-videos-section {\r\n background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);\r\n padding: 80px 20px;\r\n}\r\n\r\n.videos-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 50px;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n}\r\n\r\n.video-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.video-card:hover {\r\n transform: translateY(-5px);\r\n border-color: rgba(255, 70, 85, 0.6);\r\n box-shadow: 0 20px 50px rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.video-thumbnail-container {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n background: #000;\r\n min-height: 400px;\r\n}\r\n\r\n.video-thumbnail-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.video-card-info {\r\n padding: 30px;\r\n}\r\n\r\n.video-card-title {\r\n font-size: 1.6rem;\r\n color: #fff;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n line-height: 1.4;\r\n}\r\n\r\n.video-card-description {\r\n font-size: 1.1rem;\r\n color: #999;\r\n line-height: 1.7;\r\n}\r\n\r\n\/* SUBSCRIBE SECTION *\/\r\n.subscribe-section {\r\n background: #0a0a0a;\r\n padding: 80px 20px;\r\n}\r\n\r\n.subscribe-card {\r\n background: linear-gradient(135deg, rgba(255, 70, 85, 0.2) 0%, rgba(255, 138, 0, 0.2) 100%);\r\n border-radius: 30px;\r\n padding: 80px 40px;\r\n text-align: center;\r\n border: 2px solid rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.subscribe-card h2 {\r\n font-size: 3rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n}\r\n\r\n.subscribe-card p {\r\n font-size: 1.3rem;\r\n color: #ccc;\r\n margin-bottom: 40px;\r\n max-width: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n line-height: 1.8;\r\n}\r\n\r\n.subscribe-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 20px 50px;\r\n background: #ff0000;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 35px;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.subscribe-btn:hover {\r\n background: #cc0000;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(255, 0, 0, 0.5);\r\n}\r\n\r\n\/* FOOTER *\/\r\n.site-footer {\r\n background: #0a0a0a;\r\n border-top: 2px solid rgba(255, 255, 255, 0.1);\r\n padding: 60px 20px 30px;\r\n}\r\n\r\n.footer-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.footer-content {\r\n display: grid;\r\n grid-template-columns: 2fr 3fr 1fr;\r\n gap: 60px;\r\n margin-bottom: 40px;\r\n}\r\n\r\n.footer-brand h3 {\r\n font-size: 1.8rem;\r\n color: #ff4655;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n}\r\n\r\n.footer-brand p {\r\n color: #999;\r\n font-size: 1rem;\r\n}\r\n\r\n.footer-links {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 40px;\r\n}\r\n\r\n.footer-column h4 {\r\n font-size: 1.2rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.footer-column ul {\r\n list-style: none;\r\n}\r\n\r\n.footer-column ul li {\r\n margin-bottom: 12px;\r\n}\r\n\r\n.footer-column ul li a {\r\n color: #999;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n font-size: 1rem;\r\n}\r\n\r\n.footer-column ul li a:hover {\r\n color: #ff4655;\r\n}\r\n\r\n.footer-social h4 {\r\n font-size: 1.2rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.social-icons {\r\n display: flex;\r\n gap: 15px;\r\n}\r\n\r\n.footer-social .social-icons a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 45px;\r\n height: 45px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n color: #ffffff;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.footer-social .social-icons a:hover {\r\n background: #ff4655;\r\n transform: translateY(-3px);\r\n}\r\n\r\n.footer-bottom {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n}\r\n\r\n.footer-bottom p {\r\n color: #666;\r\n font-size: 0.95rem;\r\n}\r\n\r\n.footer-legal {\r\n display: flex;\r\n gap: 30px;\r\n}\r\n\r\n.footer-legal a {\r\n color: #999;\r\n text-decoration: none;\r\n font-size: 0.95rem;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.footer-legal a:hover {\r\n color: #ff4655;\r\n}\r\n\r\n\/* RESPONSIVE DESIGN *\/\r\n@media (max-width: 1400px) {\r\n .videos-grid {\r\n gap: 40px;\r\n }\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n .videos-grid {\r\n gap: 35px;\r\n }\r\n\r\n .content-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 350px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 25px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 1.05rem;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .action-text,\r\n .stories-text {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 2.5rem;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1.1rem;\r\n padding: 0 10px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1rem;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .header-container {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 0 20px;\r\n }\r\n\r\n .videos-nav {\r\n flex-direction: column;\r\n gap: 10px;\r\n width: 100%;\r\n }\r\n\r\n .nav-link {\r\n width: 100%;\r\n text-align: center;\r\n padding: 12px 20px;\r\n }\r\n\r\n .videos-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 300px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 25px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.4rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 1rem;\r\n }\r\n\r\n .content-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .videos-hero {\r\n padding: 60px 20px;\r\n }\r\n\r\n .all-videos-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .subscribe-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .subscribe-card {\r\n padding: 50px 30px;\r\n border-radius: 20px;\r\n }\r\n\r\n .subscribe-card h2 {\r\n font-size: 2rem;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .subscribe-card p {\r\n font-size: 1.1rem;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .subscribe-btn {\r\n padding: 16px 40px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .footer-content {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .footer-links {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .footer-legal {\r\n gap: 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .action-text,\r\n .stories-text {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 2rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1rem;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 0.95rem;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .videos-hero {\r\n padding: 40px 15px;\r\n }\r\n\r\n .all-videos-section {\r\n padding: 40px 15px;\r\n }\r\n\r\n .subscribe-section {\r\n padding: 40px 15px;\r\n }\r\n\r\n .content-container {\r\n padding: 0 15px;\r\n }\r\n\r\n .subscribe-card {\r\n padding: 40px 20px;\r\n border-radius: 15px;\r\n }\r\n\r\n .subscribe-card h2 {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .subscribe-card p {\r\n font-size: 1rem;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .subscribe-btn {\r\n padding: 14px 30px;\r\n font-size: 1rem;\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 250px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 20px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 0.95rem;\r\n }\r\n\r\n .footer-brand h3 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .footer-column h4 {\r\n font-size: 1rem;\r\n }\r\n\r\n .social-icons a {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Video data array - Add your YouTube video embed URLs here\r\nconst videos = [\r\n {\r\n embedUrl: \"https:\/\/www.youtube.com\/embed\/LguD-FWicD4?si=bX2DPpt0A1kM6cr_\",\r\n title: \"Character Breakdown - The Protagonist\",\r\n description: \"Dive deep into the main character's backstory, motivations, and development throughout the series.\"\r\n },\r\n {\r\n embedUrl: \"https:\/\/www.youtube.com\/embed\/cUM5FUoS5-4?si=CvIcPdhFlseUW7UO\",\r\n title: \"Action Stories Episode 1: The Robber Who Robs Robbers\",\r\n description: \"Watch the first episode of Action Stories! Follow Guru, the mysterious thief who only robs other robbers, as he takes on the notorious Triple 3 gang.\"\r\n },\r\n \/\/ Add more videos here in this format:\r\n \/\/ {\r\n \/\/ embedUrl: \"https:\/\/www.youtube.com\/embed\/YOUR_VIDEO_ID\",\r\n \/\/ title: \"Video Title\",\r\n \/\/ description: \"Video description\"\r\n \/\/ },\r\n];\r\n\r\n\/\/ Generate videos grid\r\nconst videosGrid = document.getElementById('videosGrid');\r\n\r\nvideos.forEach((video, index) => {\r\n const videoCard = document.createElement('div');\r\n videoCard.className = 'video-card';\r\n\r\n videoCard.innerHTML = `\r\n <div class=\"video-thumbnail-container\">\r\n <iframe\r\n src=\"${video.embedUrl}\"\r\n title=\"${video.title}\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n referrerpolicy=\"strict-origin-when-cross-origin\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <div class=\"video-card-info\">\r\n <h3 class=\"video-card-title\">${video.title}<\/h3>\r\n <p class=\"video-card-description\">${video.description}<\/p>\r\n <\/div>\r\n `;\r\n\r\n videosGrid.appendChild(videoCard);\r\n});\r\n\r\n\/\/ Smooth scroll for anchor links\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>Action Stories – YouTube Videos ACTION STORIES \u2190 Back to Home Subscribe YouTube Videos Watch behind-the-scenes content, character breakdowns, tutorials, and more from the Action Stories universe All Videos Explore our complete video library Don’t Miss Out! Subscribe to our YouTube channel for new manga releases, exclusive content, and behind-the-scenes access Subscribe to Channel ACTION […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":13,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions\/297"}],"wp:attachment":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Action Stories - YouTube Videos<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<header class=\"videos-header\">\r\n <div class=\"header-container\">\r\n <div class=\"logo-section\">\r\n <a href=\"landing.html\" class=\"logo-link\">\r\n <span class=\"action-text\">ACTION<\/span>\r\n <span class=\"stories-text\">STORIES<\/span>\r\n <\/a>\r\n <\/div>\r\n <nav class=\"videos-nav\">\r\n <a href=\"landing.html\" class=\"nav-link\">\u2190 Back to Home<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@ActionStories333\" target=\"_blank\" class=\"nav-link subscribe-link\">Subscribe<\/a>\r\n <\/nav>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"videos-hero\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"page-title\">YouTube Videos<\/h1>\r\n <p class=\"page-subtitle\">Watch behind-the-scenes content, character breakdowns, tutorials, and more from the Action Stories universe<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"all-videos-section\">\r\n <div class=\"content-container\">\r\n <h2 class=\"section-title\">All Videos<\/h2>\r\n <p class=\"section-subtitle\">Explore our complete video library<\/p>\r\n\r\n <div class=\"videos-grid\" id=\"videosGrid\">\r\n \r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"subscribe-section\">\r\n <div class=\"content-container\">\r\n <div class=\"subscribe-card\">\r\n <h2>Don't Miss Out!<\/h2>\r\n <p>Subscribe to our YouTube channel for new manga releases, exclusive content, and behind-the-scenes access<\/p>\r\n <a href=\"https:\/\/www.youtube.com\/@ActionStories333\" target=\"_blank\" class=\"subscribe-btn\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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\"\/>\r\n <\/svg>\r\n Subscribe to Channel\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer class=\"site-footer\">\r\n <div class=\"footer-container\">\r\n <div class=\"footer-content\">\r\n <div class=\"footer-brand\">\r\n <h3>ACTION STORIES<\/h3>\r\n <p>Epic manga set in the world of Azania<\/p>\r\n <\/div>\r\n\r\n <div class=\"footer-links\">\r\n <div class=\"footer-column\">\r\n <h4>Explore<\/h4>\r\n <ul>\r\n <li><a href=\"landing.html#overview\">Overview<\/a><\/li>\r\n <li><a href=\"landing.html#map\">Map of Azania<\/a><\/li>\r\n <li><a href=\"landing.html#action-stories\">Action Stories<\/a><\/li>\r\n <li><a href=\"landing.html#this-and-that\">This & That<\/a><\/li>\r\n <li><a href=\"landing.html#manga\">Read Manga<\/a><\/li>\r\n <li><a href=\"youtube-videos.html\">YouTube<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-column\">\r\n <h4>Community<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Fan Art<\/a><\/li>\r\n <li><a href=\"#\">Competitions<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-social\">\r\n <h4>Follow Us<\/h4>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" aria-label=\"Twitter\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"Instagram\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"YouTube\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <p>© 2025 Action Stories. All rights reserved.<\/p>\r\n <div class=\"footer-legal\">\r\n <a href=\"#\">Privacy Policy<\/a>\r\n <a href=\"#\">Terms of Service<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n\/* GLOBAL STYLES *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n background: #0a0a0a;\r\n color: #ffffff;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* HEADER *\/\r\n.videos-header {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\r\n border-bottom: 2px solid rgba(255, 70, 85, 0.3);\r\n padding: 20px 0;\r\n}\r\n\r\n.header-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n}\r\n\r\n.logo-link {\r\n text-decoration: none;\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n}\r\n\r\n.action-text,\r\n.stories-text {\r\n font-size: 2rem;\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.videos-nav {\r\n display: flex;\r\n gap: 20px;\r\n align-items: center;\r\n}\r\n\r\n.nav-link {\r\n color: #fff;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n}\r\n\r\n.nav-link:hover {\r\n background: rgba(255, 70, 85, 0.1);\r\n color: #ff4655;\r\n}\r\n\r\n.subscribe-link {\r\n background: #ff0000;\r\n color: white;\r\n}\r\n\r\n.subscribe-link:hover {\r\n background: #cc0000;\r\n color: white;\r\n}\r\n\r\n\/* HERO SECTION *\/\r\n.videos-hero {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);\r\n padding: 80px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.videos-hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background:\r\n radial-gradient(circle at 20% 50%, rgba(255, 70, 70, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 50%, rgba(255, 138, 0, 0.1) 0%, transparent 50%);\r\n pointer-events: none;\r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n}\r\n\r\n.page-title {\r\n font-size: 4rem;\r\n font-weight: 900;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n}\r\n\r\n.page-subtitle {\r\n font-size: 1.3rem;\r\n color: #ccc;\r\n line-height: 1.8;\r\n}\r\n\r\n\/* CONTENT CONTAINER *\/\r\n.content-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n}\r\n\r\n.section-title {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n}\r\n\r\n.section-subtitle {\r\n text-align: center;\r\n font-size: 1.2rem;\r\n color: #999;\r\n margin-bottom: 50px;\r\n}\r\n\r\n\/* ALL VIDEOS SECTION *\/\r\n.all-videos-section {\r\n background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);\r\n padding: 80px 20px;\r\n}\r\n\r\n.videos-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 50px;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n}\r\n\r\n.video-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.video-card:hover {\r\n transform: translateY(-5px);\r\n border-color: rgba(255, 70, 85, 0.6);\r\n box-shadow: 0 20px 50px rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.video-thumbnail-container {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n background: #000;\r\n min-height: 400px;\r\n}\r\n\r\n.video-thumbnail-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.video-card-info {\r\n padding: 30px;\r\n}\r\n\r\n.video-card-title {\r\n font-size: 1.6rem;\r\n color: #fff;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n line-height: 1.4;\r\n}\r\n\r\n.video-card-description {\r\n font-size: 1.1rem;\r\n color: #999;\r\n line-height: 1.7;\r\n}\r\n\r\n\/* SUBSCRIBE SECTION *\/\r\n.subscribe-section {\r\n background: #0a0a0a;\r\n padding: 80px 20px;\r\n}\r\n\r\n.subscribe-card {\r\n background: linear-gradient(135deg, rgba(255, 70, 85, 0.2) 0%, rgba(255, 138, 0, 0.2) 100%);\r\n border-radius: 30px;\r\n padding: 80px 40px;\r\n text-align: center;\r\n border: 2px solid rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.subscribe-card h2 {\r\n font-size: 3rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n}\r\n\r\n.subscribe-card p {\r\n font-size: 1.3rem;\r\n color: #ccc;\r\n margin-bottom: 40px;\r\n max-width: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n line-height: 1.8;\r\n}\r\n\r\n.subscribe-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 20px 50px;\r\n background: #ff0000;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 35px;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.subscribe-btn:hover {\r\n background: #cc0000;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(255, 0, 0, 0.5);\r\n}\r\n\r\n\/* FOOTER *\/\r\n.site-footer {\r\n background: #0a0a0a;\r\n border-top: 2px solid rgba(255, 255, 255, 0.1);\r\n padding: 60px 20px 30px;\r\n}\r\n\r\n.footer-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.footer-content {\r\n display: grid;\r\n grid-template-columns: 2fr 3fr 1fr;\r\n gap: 60px;\r\n margin-bottom: 40px;\r\n}\r\n\r\n.footer-brand h3 {\r\n font-size: 1.8rem;\r\n color: #ff4655;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n}\r\n\r\n.footer-brand p {\r\n color: #999;\r\n font-size: 1rem;\r\n}\r\n\r\n.footer-links {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 40px;\r\n}\r\n\r\n.footer-column h4 {\r\n font-size: 1.2rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.footer-column ul {\r\n list-style: none;\r\n}\r\n\r\n.footer-column ul li {\r\n margin-bottom: 12px;\r\n}\r\n\r\n.footer-column ul li a {\r\n color: #999;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n font-size: 1rem;\r\n}\r\n\r\n.footer-column ul li a:hover {\r\n color: #ff4655;\r\n}\r\n\r\n.footer-social h4 {\r\n font-size: 1.2rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.social-icons {\r\n display: flex;\r\n gap: 15px;\r\n}\r\n\r\n.footer-social .social-icons a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 45px;\r\n height: 45px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n color: #ffffff;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.footer-social .social-icons a:hover {\r\n background: #ff4655;\r\n transform: translateY(-3px);\r\n}\r\n\r\n.footer-bottom {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n}\r\n\r\n.footer-bottom p {\r\n color: #666;\r\n font-size: 0.95rem;\r\n}\r\n\r\n.footer-legal {\r\n display: flex;\r\n gap: 30px;\r\n}\r\n\r\n.footer-legal a {\r\n color: #999;\r\n text-decoration: none;\r\n font-size: 0.95rem;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.footer-legal a:hover {\r\n color: #ff4655;\r\n}\r\n\r\n\/* RESPONSIVE DESIGN *\/\r\n@media (max-width: 1400px) {\r\n .videos-grid {\r\n gap: 40px;\r\n }\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n .videos-grid {\r\n gap: 35px;\r\n }\r\n\r\n .content-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 350px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 25px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 1.05rem;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .action-text,\r\n .stories-text {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 2.5rem;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1.1rem;\r\n padding: 0 10px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1rem;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .header-container {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 0 20px;\r\n }\r\n\r\n .videos-nav {\r\n flex-direction: column;\r\n gap: 10px;\r\n width: 100%;\r\n }\r\n\r\n .nav-link {\r\n width: 100%;\r\n text-align: center;\r\n padding: 12px 20px;\r\n }\r\n\r\n .videos-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 300px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 25px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.4rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 1rem;\r\n }\r\n\r\n .content-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .videos-hero {\r\n padding: 60px 20px;\r\n }\r\n\r\n .all-videos-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .subscribe-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .subscribe-card {\r\n padding: 50px 30px;\r\n border-radius: 20px;\r\n }\r\n\r\n .subscribe-card h2 {\r\n font-size: 2rem;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .subscribe-card p {\r\n font-size: 1.1rem;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .subscribe-btn {\r\n padding: 16px 40px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .footer-content {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .footer-links {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n\r\n .footer-legal {\r\n gap: 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .action-text,\r\n .stories-text {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 2rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1rem;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 0.95rem;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .videos-hero {\r\n padding: 40px 15px;\r\n }\r\n\r\n .all-videos-section {\r\n padding: 40px 15px;\r\n }\r\n\r\n .subscribe-section {\r\n padding: 40px 15px;\r\n }\r\n\r\n .content-container {\r\n padding: 0 15px;\r\n }\r\n\r\n .subscribe-card {\r\n padding: 40px 20px;\r\n border-radius: 15px;\r\n }\r\n\r\n .subscribe-card h2 {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .subscribe-card p {\r\n font-size: 1rem;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .subscribe-btn {\r\n padding: 14px 30px;\r\n font-size: 1rem;\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .video-thumbnail-container {\r\n min-height: 250px;\r\n }\r\n\r\n .video-card-info {\r\n padding: 20px;\r\n }\r\n\r\n .video-card-title {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .video-card-description {\r\n font-size: 0.95rem;\r\n }\r\n\r\n .footer-brand h3 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .footer-column h4 {\r\n font-size: 1rem;\r\n }\r\n\r\n .social-icons a {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Video data array - Add your YouTube video embed URLs here\r\nconst videos = [\r\n {\r\n embedUrl: \"https:\/\/www.youtube.com\/embed\/LguD-FWicD4?si=bX2DPpt0A1kM6cr_\",\r\n title: \"Character Breakdown - The Protagonist\",\r\n description: \"Dive deep into the main character's backstory, motivations, and development throughout the series.\"\r\n },\r\n {\r\n embedUrl: \"https:\/\/www.youtube.com\/embed\/cUM5FUoS5-4?si=CvIcPdhFlseUW7UO\",\r\n title: \"Action Stories Episode 1: The Robber Who Robs Robbers\",\r\n description: \"Watch the first episode of Action Stories! Follow Guru, the mysterious thief who only robs other robbers, as he takes on the notorious Triple 3 gang.\"\r\n },\r\n \/\/ Add more videos here in this format:\r\n \/\/ {\r\n \/\/ embedUrl: \"https:\/\/www.youtube.com\/embed\/YOUR_VIDEO_ID\",\r\n \/\/ title: \"Video Title\",\r\n \/\/ description: \"Video description\"\r\n \/\/ },\r\n];\r\n\r\n\/\/ Generate videos grid\r\nconst videosGrid = document.getElementById('videosGrid');\r\n\r\nvideos.forEach((video, index) => {\r\n const videoCard = document.createElement('div');\r\n videoCard.className = 'video-card';\r\n\r\n videoCard.innerHTML = `\r\n <div class=\"video-thumbnail-container\">\r\n <iframe\r\n src=\"${video.embedUrl}\"\r\n title=\"${video.title}\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n referrerpolicy=\"strict-origin-when-cross-origin\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <div class=\"video-card-info\">\r\n <h3 class=\"video-card-title\">${video.title}<\/h3>\r\n <p class=\"video-card-description\">${video.description}<\/p>\r\n <\/div>\r\n `;\r\n\r\n videosGrid.appendChild(videoCard);\r\n});\r\n\r\n\/\/ Smooth scroll for anchor links\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>Action Stories – YouTube Videos ACTION STORIES \u2190 Back to Home Subscribe YouTube Videos Watch behind-the-scenes content, character breakdowns, tutorials, and more from the Action Stories universe All Videos Explore our complete video library Don’t Miss Out! Subscribe to our YouTube channel for new manga releases, exclusive content, and behind-the-scenes access Subscribe to Channel ACTION […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":13,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions\/297"}],"wp:attachment":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}