{"id":3491,"date":"2026-05-13T12:17:30","date_gmt":"2026-05-13T12:17:30","guid":{"rendered":"https:\/\/earlyasd.eu\/web\/?page_id=3491"},"modified":"2026-05-26T16:38:05","modified_gmt":"2026-05-26T16:38:05","slug":"video-library","status":"publish","type":"page","link":"https:\/\/earlyasd.eu\/web\/video-library\/","title":{"rendered":"Video Library"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3491\" class=\"elementor elementor-3491\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e15ad57 e-flex e-con-boxed e-con e-parent\" data-id=\"7e15ad57\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-953d3e4 e-flex e-con-boxed e-con e-parent\" data-id=\"953d3e4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc5bd89 elementor-widget elementor-widget-html\" data-id=\"fc5bd89\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- EARLY ASD - Digital Social Stories Video Library -->\r\n<!-- WordPress\/Elementor Compatible HTML Block -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* =========================================================\r\n   EARLY ASD VIDEO LIBRARY \u2014 Scoped Styles\r\n   All selectors prefixed with .easd-vl to avoid Elementor conflicts\r\n   ========================================================= *\/\r\n\r\n.easd-vl *,\r\n.easd-vl *::before,\r\n.easd-vl *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n:root {\r\n  --easd-pink: #d20859;\r\n  --easd-pink-hover: #ed166d;\r\n  --easd-blue: #6EC1E4;\r\n  --easd-blue-dark: #3a9ec4;\r\n  --easd-dark: #1a1a2e;\r\n  --easd-text: #333333;\r\n  --easd-text-light: #666666;\r\n  --easd-white: #ffffff;\r\n  --easd-bg: #ffffff;\r\n  --easd-border: #e8eef5;\r\n  --easd-radius: 14px;\r\n  --easd-radius-sm: 8px;\r\n  --easd-font-heading: 'Montserrat', sans-serif;\r\n  --easd-font-body: 'Source Sans Pro', sans-serif;\r\n}\r\n\r\n\/* \u2500\u2500 WRAPPER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl {\r\n  font-family: var(--easd-font-body);\r\n  color: var(--easd-text);\r\n  background-color: var(--easd-bg);\r\n  padding: 0;\r\n  width: 100%;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 HERO HEADER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__hero {\r\n  background: #ffffff;\r\n  border-bottom: 1px solid var(--easd-border);\r\n  position: relative;\r\n  overflow: hidden;\r\n  padding: 72px 40px 60px;\r\n  text-align: center;\r\n}\r\n\r\n.easd-vl__hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: -120px; right: -120px;\r\n  width: 420px; height: 420px;\r\n  background: radial-gradient(circle, rgba(110,193,228,0.12) 0%, transparent 70%);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n}\r\n\r\n.easd-vl__hero::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: -100px; left: -80px;\r\n  width: 360px; height: 360px;\r\n  background: radial-gradient(circle, rgba(210,8,89,0.07) 0%, transparent 70%);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n}\r\n\r\n.easd-vl__hero-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 860px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.easd-vl__badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  background: rgba(210,8,89,0.07);\r\n  border: 1px solid rgba(210,8,89,0.2);\r\n  color: var(--easd-pink);\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n  padding: 7px 18px;\r\n  border-radius: 50px;\r\n  margin-bottom: 24px;\r\n}\r\n.easd-vl__badge svg { width: 14px; height: 14px; fill: var(--easd-pink); }\r\n\r\n.easd-vl__title {\r\n  font-family: var(--easd-font-heading);\r\n  font-size: clamp(26px, 4vw, 46px);\r\n  font-weight: 800;\r\n  color: var(--easd-dark);\r\n  line-height: 1.15;\r\n  margin-bottom: 20px;\r\n  letter-spacing: -0.5px;\r\n}\r\n.easd-vl__title span {\r\n  color: var(--easd-pink);\r\n  position: relative;\r\n}\r\n.easd-vl__title span::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: -3px; left: 0;\r\n  width: 100%; height: 3px;\r\n  background: linear-gradient(90deg, var(--easd-pink), var(--easd-pink-hover));\r\n  border-radius: 2px;\r\n}\r\n\r\n.easd-vl__intro {\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  color: var(--easd-text-light);\r\n  line-height: 1.75;\r\n  max-width: 680px;\r\n  margin: 0 auto 44px;\r\n}\r\n\r\n\/* \u2500\u2500 STAT CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__stats {\r\n  display: flex;\r\n  gap: 20px;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.easd-vl__stat-card {\r\n  background: #ffffff;\r\n  border: 1.5px solid var(--easd-border);\r\n  border-radius: var(--easd-radius);\r\n  padding: 22px 40px;\r\n  text-align: center;\r\n  min-width: 160px;\r\n  transition: transform 0.3s ease, border-color 0.3s ease;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n.easd-vl__stat-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 3px;\r\n  border-radius: var(--easd-radius) var(--easd-radius) 0 0;\r\n}\r\n.easd-vl__stat-card--pink::before { background: linear-gradient(90deg, var(--easd-pink), var(--easd-pink-hover)); }\r\n.easd-vl__stat-card--blue::before { background: linear-gradient(90deg, var(--easd-blue-dark), var(--easd-blue)); }\r\n.easd-vl__stat-card:hover { transform: translateY(-4px); border-color: rgba(210,8,89,0.2); }\r\n\r\n.easd-vl__stat-icon {\r\n  width: 38px; height: 38px;\r\n  border-radius: 10px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin: 0 auto 12px;\r\n}\r\n.easd-vl__stat-card--pink .easd-vl__stat-icon { background: rgba(210,8,89,0.2); }\r\n.easd-vl__stat-card--blue .easd-vl__stat-icon { background: rgba(110,193,228,0.2); }\r\n.easd-vl__stat-icon svg { width: 20px; height: 20px; }\r\n.easd-vl__stat-card--pink .easd-vl__stat-icon svg { fill: var(--easd-pink); }\r\n.easd-vl__stat-card--blue .easd-vl__stat-icon svg { fill: var(--easd-blue); }\r\n\r\n.easd-vl__stat-number {\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 32px; font-weight: 800;\r\n  line-height: 1; margin-bottom: 5px; letter-spacing: -1px;\r\n}\r\n.easd-vl__stat-card--pink .easd-vl__stat-number { color: var(--easd-pink); }\r\n.easd-vl__stat-card--blue .easd-vl__stat-number { color: var(--easd-blue-dark); }\r\n\r\n.easd-vl__stat-label {\r\n  font-size: 12px; font-weight: 600;\r\n  color: var(--easd-text-light);\r\n  text-transform: uppercase; letter-spacing: 1.5px;\r\n}\r\n\r\n\/* \u2500\u2500 WAVE \u2500\u2500 *\/\r\n.easd-vl__wave { display: none; }\r\n\r\n\/* \u2500\u2500 GRID SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__grid-section {\r\n  padding: 56px 32px 80px;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.easd-vl__section-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 40px;\r\n  flex-wrap: wrap;\r\n  gap: 16px;\r\n}\r\n\r\n.easd-vl__section-label {\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 12px; font-weight: 700;\r\n  letter-spacing: 2.5px; text-transform: uppercase;\r\n  color: var(--easd-pink);\r\n  display: flex; align-items: center; gap: 8px;\r\n}\r\n.easd-vl__section-label::before {\r\n  content: '';\r\n  display: inline-block;\r\n  width: 28px; height: 3px;\r\n  background: var(--easd-pink); border-radius: 2px;\r\n}\r\n\r\n.easd-vl__section-count {\r\n  font-size: 14px; color: var(--easd-text-light); font-weight: 600;\r\n  background: var(--easd-white);\r\n  border: 1px solid var(--easd-border);\r\n  padding: 6px 16px; border-radius: 50px;\r\n}\r\n\r\n\/* \u2500\u2500 VIDEO GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 28px;\r\n}\r\n\r\n\/* \u2500\u2500 VIDEO CARD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__card {\r\n  background: var(--easd-white);\r\n  border-radius: var(--easd-radius);\r\n  overflow: hidden;\r\n  display: flex; flex-direction: column;\r\n  transition: border-color 0.3s ease;\r\n  border: 1px solid var(--easd-border);\r\n  position: relative;\r\n  box-shadow: none;\r\n  animation: easd-fadeUp 0.5s ease both;\r\n}\r\n.easd-vl__card:hover { border-color: rgba(210,8,89,0.2); box-shadow: none; }\r\n\r\n.easd-vl__card-number {\r\n  position: absolute; top: 14px; left: 14px; z-index: 4;\r\n  background: var(--easd-dark); color: var(--easd-white);\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 10px; font-weight: 800; letter-spacing: 1px;\r\n  padding: 4px 10px; border-radius: 6px; text-transform: uppercase;\r\n}\r\n\r\n\/* Thumbnail wrapper (placeholder \/ coming-soon cards) *\/\r\n.easd-vl__thumb-wrap {\r\n  position: relative;\r\n  width: 100%; padding-top: 56.25%;\r\n  background: linear-gradient(145deg, #0f0c29, #1a1a2e);\r\n  overflow: hidden; cursor: pointer;\r\n}\r\n.easd-vl__thumb-img {\r\n  position: absolute; top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n  object-fit: contain; padding: 20px;\r\n  transition: transform 0.45s ease, filter 0.45s ease;\r\n  filter: drop-shadow(0 4px 24px rgba(110,193,228,0.2));\r\n}\r\n.easd-vl__card:hover .easd-vl__thumb-img {\r\n  transform: scale(1.04);\r\n  filter: drop-shadow(0 8px 32px rgba(110,193,228,0.4));\r\n}\r\n.easd-vl__play-overlay {\r\n  position: absolute; top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n  display: flex; align-items: center; justify-content: center;\r\n  background: rgba(15,12,41,0);\r\n  transition: background 0.35s ease;\r\n  z-index: 2;\r\n}\r\n.easd-vl__card:hover .easd-vl__play-overlay { background: rgba(15,12,41,0.45); }\r\n.easd-vl__play-btn {\r\n  width: 60px; height: 60px;\r\n  background: var(--easd-pink); border-radius: 50%;\r\n  display: flex; align-items: center; justify-content: center;\r\n  opacity: 0; transform: scale(0.7);\r\n  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n.easd-vl__card:hover .easd-vl__play-btn { opacity: 1; transform: scale(1); }\r\n.easd-vl__play-btn svg { width: 22px; height: 22px; fill: white; margin-left: 3px; }\r\n\r\n.easd-vl__coming-badge {\r\n  position: absolute; top: 14px; right: 14px; z-index: 4;\r\n  background: linear-gradient(135deg, var(--easd-blue-dark), var(--easd-blue));\r\n  color: white;\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;\r\n  text-transform: uppercase; padding: 4px 10px; border-radius: 6px;\r\n  animation: easd-pulse 2.2s ease-in-out infinite;\r\n}\r\n\r\n\/* YouTube embed wrapper (live cards) *\/\r\n.easd-vl__embed-wrap {\r\n  position: relative;\r\n  width: 100%; padding-top: 56.25%;\r\n  background: #000; overflow: hidden;\r\n}\r\n.easd-vl__embed-wrap iframe {\r\n  position: absolute; top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n  border: none; display: block;\r\n}\r\n\r\n\/* \u2500\u2500 CARD BODY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__card-body {\r\n  padding: 20px 22px 10px;\r\n  flex: 1; display: flex; flex-direction: column;\r\n}\r\n\r\n.easd-vl__card-title {\r\n  font-family: var(--easd-font-heading);\r\n  font-size: 12px !important; font-weight: 700;\r\n  color: var(--easd-dark); line-height: 1.4;\r\n  margin-bottom: 12px;\r\n  display: flex; flex-direction: column; gap: 4px;\r\n}\r\n.easd-vl__card-story-num {\r\n  font-size: 11px !important; font-weight: 700 !important;\r\n  color: var(--easd-pink) !important;\r\n  text-transform: uppercase; letter-spacing: 1px;\r\n  font-family: var(--easd-font-heading) !important;\r\n}\r\n.easd-vl__card-story-name {\r\n  font-size: 12px !important; font-weight: 600 !important;\r\n  color: var(--easd-dark) !important;\r\n  font-family: var(--easd-font-heading) !important;\r\n  line-height: 1.4;\r\n}\r\n\r\n.easd-vl__card-meta {\r\n  display: flex; align-items: center; gap: 14px;\r\n  margin-bottom: 18px; flex-wrap: wrap;\r\n}\r\n.easd-vl__meta-item {\r\n  display: flex; align-items: center; gap: 5px;\r\n  font-size: 12px; color: var(--easd-text-light); font-weight: 600;\r\n}\r\n.easd-vl__meta-item svg { width: 13px; height: 13px; fill: var(--easd-blue); flex-shrink: 0; }\r\n.easd-vl__meta-dot { width: 3px; height: 3px; background: var(--easd-border); border-radius: 50%; }\r\n\r\n\/* \u2500\u2500 view count loading skeleton \u2500\u2500 *\/\r\n.easd-vl__views-loading {\r\n  display: inline-block;\r\n  width: 36px; height: 10px;\r\n  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);\r\n  background-size: 200% 100%;\r\n  border-radius: 4px;\r\n  animation: easd-skeleton 1.4s ease infinite;\r\n  vertical-align: middle;\r\n}\r\n@keyframes easd-skeleton {\r\n  0%   { background-position: 200% 0; }\r\n  100% { background-position: -200% 0; }\r\n}\r\n\r\n\/* \u2500\u2500 CARD FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__card-footer {\r\n  padding: 14px 22px 20px;\r\n  display: flex; gap: 10px; align-items: center;\r\n  border-top: 1px solid var(--easd-border);\r\n}\r\n\r\n.easd-vl__watch-btn {\r\n  flex: 1;\r\n  display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n  background: var(--easd-pink);\r\n  color: var(--easd-white) !important;\r\n  font-family: var(--easd-font-body) !important;\r\n  font-size: 13px !important; font-weight: 700 !important;\r\n  text-decoration: none !important;\r\n  border: none; border-radius: var(--easd-radius-sm);\r\n  padding: 11px 18px; cursor: pointer;\r\n  transition: background 0.25s ease, transform 0.2s ease;\r\n  line-height: 1 !important; box-shadow: none !important;\r\n}\r\n.easd-vl__watch-btn svg { width: 14px; height: 14px; fill: white; flex-shrink: 0; }\r\n.easd-vl__watch-btn:hover {\r\n  background: var(--easd-pink-hover) !important;\r\n  transform: translateY(-1px);\r\n  color: white !important; text-decoration: none !important; box-shadow: none !important;\r\n}\r\n\r\n.easd-vl__yt-btn {\r\n  width: 40px; height: 40px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  background: rgba(210,8,89,0.08);\r\n  border: 1.5px solid rgba(210,8,89,0.2);\r\n  border-radius: var(--easd-radius-sm);\r\n  text-decoration: none !important;\r\n  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;\r\n  flex-shrink: 0;\r\n}\r\n.easd-vl__yt-btn svg { width: 18px; height: 18px; fill: var(--easd-pink); transition: fill 0.25s ease; }\r\n.easd-vl__yt-btn:hover {\r\n  background: var(--easd-pink); border-color: var(--easd-pink);\r\n  transform: translateY(-1px); box-shadow: none !important;\r\n}\r\n.easd-vl__yt-btn:hover svg { fill: white; }\r\n\r\n\/* \u2500\u2500 FOOTER CTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easd-vl__footer-cta {\r\n  background: #ffffff;\r\n  border-top: 1px solid var(--easd-border);\r\n  padding: 36px 32px; text-align: center;\r\n}\r\n.easd-vl__footer-cta-links {\r\n  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;\r\n}\r\n.easd-vl__cta-btn {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  font-family: var(--easd-font-body) !important;\r\n  font-size: 14px !important; font-weight: 700 !important;\r\n  text-decoration: none !important;\r\n  padding: 13px 28px; border-radius: var(--easd-radius-sm);\r\n  transition: all 0.25s ease; line-height: 1 !important; box-shadow: none !important;\r\n}\r\n.easd-vl__cta-btn--outline {\r\n  background: #ffffff; color: var(--easd-blue-dark) !important;\r\n  border: 1.5px solid var(--easd-blue);\r\n}\r\n.easd-vl__cta-btn--outline:hover {\r\n  background: var(--easd-blue); border-color: var(--easd-blue);\r\n  transform: translateY(-2px); color: white !important;\r\n  text-decoration: none !important; box-shadow: none !important;\r\n}\r\n.easd-vl__cta-btn svg { width: 16px; height: 16px; fill: currentColor; }\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n  .easd-vl__hero { padding: 52px 20px 44px; }\r\n  .easd-vl__stats { gap: 14px; }\r\n  .easd-vl__stat-card { padding: 18px 28px; min-width: 130px; }\r\n  .easd-vl__stat-number { font-size: 26px; }\r\n  .easd-vl__grid-section { padding: 40px 16px 60px; }\r\n  .easd-vl__grid { grid-template-columns: 1fr; gap: 20px; }\r\n  .easd-vl__footer-cta { padding: 44px 20px; }\r\n}\r\n@media (min-width: 769px) and (max-width: 1024px) {\r\n  .easd-vl__grid { grid-template-columns: repeat(2,1fr); gap: 22px; }\r\n}\r\n\r\n\/* \u2500\u2500 ANIMATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@keyframes easd-fadeUp {\r\n  from { opacity: 0; transform: translateY(28px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n.easd-vl__card:nth-child(1)  { animation-delay: 0.05s; }\r\n.easd-vl__card:nth-child(2)  { animation-delay: 0.10s; }\r\n.easd-vl__card:nth-child(3)  { animation-delay: 0.15s; }\r\n.easd-vl__card:nth-child(4)  { animation-delay: 0.20s; }\r\n.easd-vl__card:nth-child(5)  { animation-delay: 0.25s; }\r\n.easd-vl__card:nth-child(6)  { animation-delay: 0.30s; }\r\n.easd-vl__card:nth-child(7)  { animation-delay: 0.35s; }\r\n.easd-vl__card:nth-child(8)  { animation-delay: 0.40s; }\r\n.easd-vl__card:nth-child(9)  { animation-delay: 0.45s; }\r\n.easd-vl__card:nth-child(10) { animation-delay: 0.50s; }\r\n@keyframes easd-pulse {\r\n  0%, 100% { opacity: 1; } 50% { opacity: 0.65; }\r\n}\r\n<\/style>\r\n\r\n<!-- ========================================================\r\n     EARLY ASD \u2014 VIDEO LIBRARY SECTION\r\n     ======================================================== -->\r\n<section class=\"easd-vl\" aria-label=\"Digital Social Stories Video Library\">\r\n\r\n  <!-- \u2500\u2500 HERO \u2500\u2500 -->\r\n  <div class=\"easd-vl__hero\">\r\n    <div class=\"easd-vl__hero-inner\">\r\n      <div class=\"easd-vl__badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\/><\/svg>\r\n        EARLY-ASD Project\r\n      <\/div>\r\n      <h1 class=\"easd-vl__title\">Digital Social Stories<br><span>Video Library<\/span><\/h1>\r\n      <p class=\"easd-vl__intro\">\r\n        EARLY-ASD Digital Social Stories explain social situations in intelligible ways from a first-person perspective, teach social skills and help children cope with difficulties in social situations. Below, you can watch the digital social stories developed by the project consortium.\r\n      <\/p>\r\n      <div class=\"easd-vl__stats\">\r\n        <div class=\"easd-vl__stat-card easd-vl__stat-card--pink\">\r\n          <div class=\"easd-vl__stat-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h12a1 1 0 001-1v-3.5l4 4v-11l-4 4z\"\/><\/svg><\/div>\r\n          <div class=\"easd-vl__stat-number\">10<\/div>\r\n          <div class=\"easd-vl__stat-label\">Videos<\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__stat-card easd-vl__stat-card--blue\">\r\n          <div class=\"easd-vl__stat-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><\/div>\r\n          <!-- Total view count injected by JS into this span -->\r\n          <div class=\"easd-vl__stat-number\" id=\"easd-total-views\"><span class=\"easd-vl__views-loading\"><\/span><\/div>\r\n          <div class=\"easd-vl__stat-label\">Total Views<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <svg class=\"easd-vl__wave\" viewBox=\"0 0 1440 60\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n    <path d=\"M0,40 C360,70 1080,10 1440,40 L1440,60 L0,60 Z\" fill=\"#f7f9fc\"\/>\r\n  <\/svg>\r\n\r\n  <!-- \u2500\u2500 VIDEO GRID \u2500\u2500 -->\r\n  <div class=\"easd-vl__grid-section\">\r\n    <div class=\"easd-vl__section-header\">\r\n      <span class=\"easd-vl__section-label\">All Videos<\/span>\r\n      <span class=\"easd-vl__section-count\">Showing 10 of 10<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"easd-vl__grid\" role=\"list\">\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CARD 1 \u2014 PUBLISHED \u2713  |  ID: O6I_fFNIQgk\r\n           data-youtube-id  \u2192 used by the view-count script\r\n           \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\"\r\n               data-video-id=\"1\"\r\n               data-youtube-id=\"O6I_fFNIQgk\"\r\n               data-youtube-url=\"https:\/\/www.youtube.com\/watch?v=O6I_fFNIQgk\">\r\n        <div class=\"easd-vl__card-number\">Story 01<\/div>\r\n        <div class=\"easd-vl__embed-wrap\">\r\n          <iframe src=\"https:\/\/www.youtube.com\/embed\/O6I_fFNIQgk?si=pfZL7Xfg0SG95890\"\r\n            title=\"Digital Social Story 1 \u2013 I Can Ask When I Don't Understand\"\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\" allowfullscreen><\/iframe>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 1<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Ask When I Don't Understand<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\">\r\n              <!-- eye icon -->\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg>\r\n              <!-- View count injected here by JS -->\r\n              <span class=\"easd-vl__view-count easd-vl__views-loading\" data-id=\"O6I_fFNIQgk\"><\/span>\r\n            <\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>\r\n              2026\r\n            <\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"https:\/\/www.youtube.com\/watch?v=O6I_fFNIQgk\" class=\"easd-vl__watch-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now\r\n          <\/a>\r\n          <a href=\"https:\/\/www.youtube.com\/watch?v=O6I_fFNIQgk\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open on YouTube\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg>\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Cards 2\u201310: Coming Soon \u2014 PASTE YOUTUBE EMBED CODE HERE when published\r\n           Pattern to activate a card:\r\n             1. Replace .easd-vl__thumb-wrap with .easd-vl__embed-wrap + iframe\r\n             2. Set data-youtube-id=\"REAL_ID\" on the article\r\n             3. Add data-id=\"REAL_ID\" to the .easd-vl__view-count span\r\n             4. Update both footer href=\"#\" to the real YouTube URL\r\n             5. Remove <span class=\"easd-vl__coming-badge\"> -->\r\n\r\n      <!-- Card 2 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"2\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 02<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 2 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 2\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 2<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Stay Calm When I Lose a Game<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 3 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"3\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 03<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 3 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 3\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 3<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Ask for Quiet<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 4 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"4\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 04<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 4 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 4\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 4<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Ask for Help at School<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 5 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"5\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 05<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 5 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 5\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 5<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Share My Toys<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 6 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"6\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 06<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 6 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 6\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 6<\/span>\r\n            <span class=\"easd-vl__card-story-name\">Saying Hello and Goodbye<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 7 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"7\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 07<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 7 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 7\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 7<\/span>\r\n            <span class=\"easd-vl__card-story-name\">When Someone Helps Me, I Say \"Thank You\"<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 8 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"8\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 08<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 8 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 8\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 8<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Talk When There Is a Problem<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 9 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"9\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 09<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 9 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 9\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 9<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Say \"No\" When I Feel Uncomfortable<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 10 -->\r\n      <article class=\"easd-vl__card\" role=\"listitem\" data-video-id=\"10\" data-youtube-id=\"\" data-youtube-url=\"#\">\r\n        <div class=\"easd-vl__card-number\">Story 10<\/div>\r\n        <div class=\"easd-vl__thumb-wrap\">\r\n          <!-- PASTE YOUTUBE EMBED CODE HERE when Story 10 is published -->\r\n          <img decoding=\"async\" class=\"easd-vl__thumb-img\" src=\"https:\/\/earlyasd.eu\/web\/wp-content\/uploads\/2026\/05\/EARLY-ASD-SQUARE-TRANSPARENT-LOGO-FINAL.png\" alt=\"Story 10\" loading=\"lazy\">\r\n          <div class=\"easd-vl__play-overlay\" aria-hidden=\"true\"><div class=\"easd-vl__play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n          <span class=\"easd-vl__coming-badge\">Coming Soon<\/span>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-body\">\r\n          <h3 class=\"easd-vl__card-title\">\r\n            <span class=\"easd-vl__card-story-num\">Digital Social Story 10<\/span>\r\n            <span class=\"easd-vl__card-story-name\">I Can Stay Calm When My Tower Falls<\/span>\r\n          <\/h3>\r\n          <div class=\"easd-vl__card-meta\">\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/svg><span class=\"easd-vl__view-count\" data-id=\"\">\u2014<\/span><\/span>\r\n            <span class=\"easd-vl__meta-dot\"><\/span>\r\n            <span class=\"easd-vl__meta-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\/><\/svg>2026<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"easd-vl__card-footer\">\r\n          <a href=\"#\" class=\"easd-vl__watch-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>Watch Now<\/a>\r\n          <a href=\"#\" class=\"easd-vl__yt-btn\" target=\"_blank\" rel=\"noopener noreferrer\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div><!-- \/.easd-vl__grid -->\r\n  <\/div><!-- \/.easd-vl__grid-section -->\r\n\r\n  <!-- \u2500\u2500 FOOTER CTA \u2500\u2500 -->\r\n  <div class=\"easd-vl__footer-cta\">\r\n    <div class=\"easd-vl__footer-cta-links\">\r\n      <a href=\"https:\/\/www.youtube.com\/@EARLYASD\" class=\"easd-vl__cta-btn easd-vl__cta-btn--outline\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3L10 15z\"\/><\/svg>\r\n        Visit Our YouTube Channel\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n<!-- END EARLY ASD VIDEO LIBRARY -->\r\n\r\n<!-- ============================================================\r\n     YOUTUBE VIEW COUNT SCRIPT\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     HOW TO ACTIVATE:\r\n       1. Go to https:\/\/console.cloud.google.com\/\r\n       2. Create a project \u2192 Enable \"YouTube Data API v3\"\r\n       3. Create an API Key \u2192 Restrict it to your domain\r\n       4. Replace  YOUR_YOUTUBE_API_KEY_HERE  below with your key\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     WHAT IT DOES:\r\n       \u2022 Finds every .easd-vl__view-count span that has a\r\n         non-empty data-id attribute (i.e. published videos only)\r\n       \u2022 Calls YouTube Data API in a single batch request\r\n       \u2022 Formats numbers: 1234 \u2192 \"1.2K\", 1500000 \u2192 \"1.5M\"\r\n       \u2022 Updates the eye-icon count AND the hero \"Total Views\" stat\r\n       \u2022 Shows a shimmer skeleton while loading\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SECURITY NOTE:\r\n       Restrict the API key to your website domain in Google Cloud\r\n       Console (API restrictions \u2192 HTTP referrers) so it cannot\r\n       be used from other sites.\r\n     ============================================================ -->\r\n<script>\r\n(function () {\r\n  \/\/ \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \/\/ \u2502  STEP 1 \u2014 Paste your YouTube Data API v3 key here  \u2502\r\n  \/\/ \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n  var API_KEY = 'AIzaSyCGOSx2MsUaKcb8UNlEcZrzxNVnB4IJRo0';\r\n\r\n  \/\/ Collect all view-count spans that have a real video ID\r\n  var spans = Array.from(\r\n    document.querySelectorAll('.easd-vl__view-count[data-id]')\r\n  ).filter(function (s) { return s.getAttribute('data-id').trim() !== ''; });\r\n\r\n  if (!spans.length || API_KEY === 'YOUR_YOUTUBE_API_KEY_HERE') {\r\n    \/\/ No published videos yet, or key not set \u2014 leave dashes\r\n    spans.forEach(function (s) {\r\n      s.classList.remove('easd-vl__views-loading');\r\n      s.textContent = '\u2014';\r\n    });\r\n    return;\r\n  }\r\n\r\n  \/\/ Build a comma-separated list of unique IDs for a single API call\r\n  var ids = [...new Set(spans.map(function (s) {\r\n    return s.getAttribute('data-id').trim();\r\n  }))].join(',');\r\n\r\n  var url =\r\n    'https:\/\/www.googleapis.com\/youtube\/v3\/videos' +\r\n    '?part=statistics' +\r\n    '&id=' + encodeURIComponent(ids) +\r\n    '&key=' + encodeURIComponent(API_KEY);\r\n\r\n  fetch(url)\r\n    .then(function (r) { return r.json(); })\r\n    .then(function (data) {\r\n      if (!data.items) return;\r\n\r\n      \/\/ Map videoId \u2192 viewCount\r\n      var counts = {};\r\n      data.items.forEach(function (item) {\r\n        counts[item.id] = parseInt(item.statistics.viewCount || '0', 10);\r\n      });\r\n\r\n      \/\/ Format: 0\u2013999 \u2192 \"123\", 1K\u2013999K \u2192 \"1.2K\", 1M+ \u2192 \"1.5M\"\r\n      function fmt(n) {\r\n        if (n >= 1000000) return (n \/ 1000000).toFixed(1).replace(\/\\.0$\/, '') + 'M';\r\n        if (n >= 1000)    return (n \/ 1000).toFixed(1).replace(\/\\.0$\/, '') + 'K';\r\n        return String(n);\r\n      }\r\n\r\n      var total = 0;\r\n\r\n      spans.forEach(function (span) {\r\n        var id = span.getAttribute('data-id').trim();\r\n        span.classList.remove('easd-vl__views-loading');\r\n        if (counts[id] !== undefined) {\r\n          total += counts[id];\r\n          span.textContent = fmt(counts[id]) + ' views';\r\n        } else {\r\n          span.textContent = '\u2014';\r\n        }\r\n      });\r\n\r\n      \/\/ Update hero \"Total Views\" stat card\r\n      var totalEl = document.getElementById('easd-total-views');\r\n      if (totalEl) {\r\n        totalEl.innerHTML = fmt(total);\r\n      }\r\n    })\r\n    .catch(function () {\r\n      \/\/ On any error, silently fall back to dashes\r\n      spans.forEach(function (s) {\r\n        s.classList.remove('easd-vl__views-loading');\r\n        s.textContent = '\u2014';\r\n      });\r\n      var totalEl = document.getElementById('easd-total-views');\r\n      if (totalEl) totalEl.textContent = '\u2014';\r\n    });\r\n})();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EARLY-ASD Project Digital Social StoriesVideo Library EARLY-ASD Digital Social Stories explain social situations in intelligible ways from a first-person perspective, teach social skills and help children cope with difficulties in social situations. Below, you can watch the digital social stories developed by the project consortium. 10 Videos Total Views All Videos Showing 10 of 10 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/comments?post=3491"}],"version-history":[{"count":37,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3491\/revisions"}],"predecessor-version":[{"id":3613,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3491\/revisions\/3613"}],"wp:attachment":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/media?parent=3491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}