{"id":2682,"date":"2026-05-25T16:03:20","date_gmt":"2026-05-25T21:03:20","guid":{"rendered":"https:\/\/yfc.ca\/steinbach\/?page_id=2682"},"modified":"2026-05-25T16:35:12","modified_gmt":"2026-05-25T21:35:12","slug":"youth-stories","status":"publish","type":"page","link":"https:\/\/yfc.ca\/steinbach\/youth-stories\/","title":{"rendered":"Youth Stories"},"content":{"rendered":"\n<style>\n.ys-section {\n  font-family: inherit;\n  background: #fff;\n  padding: 60px 0 0;\n}\n\n.ys-section-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.ys-eyebrow {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #555;\n  margin-bottom: 14px;\n  opacity: 0;\n  transform: translateY(12px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.ys-section-heading {\n  font-size: 2.8rem;\n  font-weight: 900;\n  line-height: 1.05;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  color: #1a1a1a;\n  margin: 0 0 48px;\n  font-family: inherit;\n  opacity: 0;\n  transform: translateY(16px);\n  transition: opacity 0.55s ease 0.1s, transform 0.55s ease 0.1s;\n}\n\n.ys-eyebrow.ys-visible,\n.ys-section-heading.ys-visible {\n  opacity: 1;\n  transform: none;\n}\n\n\/* GRID *\/\n.ys-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px 28px;\n}\n\n\/* CARD *\/\n.ys-card {\n  display: flex;\n  flex-direction: column;\n  opacity: 0;\n  transform: translateY(24px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n.ys-card.ys-visible {\n  opacity: 1;\n  transform: none;\n}\n\n.ys-thumb-btn {\n  display: block;\n  width: 100%;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  position: relative;\n  border-radius: 3px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.ys-thumb {\n  position: relative;\n  padding-bottom: 56.25%;\n  background: #111;\n  display: block;\n}\n\n.ys-thumb img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  opacity: 0.82;\n  transition: opacity 0.2s;\n}\n\n.ys-thumb-btn:hover .ys-thumb img { opacity: 1; }\n\n.ys-play {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.ys-play-circle {\n  width: 48px;\n  height: 48px;\n  background: #E31837;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.15s, background 0.15s;\n}\n\n.ys-thumb-btn:hover .ys-play-circle {\n  transform: scale(1.1);\n  background: #c01227;\n}\n\n.ys-play-circle svg {\n  width: 14px;\n  height: 14px;\n  fill: #fff;\n  margin-left: 3px;\n}\n\n.ys-card-text {\n  padding: 18px 0 0;\n  flex: 1;\n}\n\n.ys-name {\n  font-size: 1.25rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  letter-spacing: 0.01em;\n  color: #1a1a1a;\n  margin: 0 0 8px;\n  font-family: inherit;\n}\n\n.ys-blurb {\n  font-size: 14px;\n  line-height: 1.75;\n  color: #555;\n  margin: 0;\n}\n\n\/* VOLUNTEER BANNER *\/\n.ys-banner {\n  background: #E31837;\n  margin-top: 64px;\n  padding: 52px 24px;\n  text-align: center;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.55s ease, transform 0.55s ease;\n}\n.ys-banner.ys-visible {\n  opacity: 1;\n  transform: none;\n}\n\n.ys-banner-eyebrow {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,0.65);\n  margin-bottom: 14px;\n}\n\n.ys-banner-heading {\n  font-size: 2.4rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  color: #fff;\n  margin: 0 0 16px;\n  line-height: 1.05;\n  font-family: inherit;\n}\n\n.ys-banner-text {\n  font-size: 15px;\n  color: rgba(255,255,255,0.8);\n  margin: 0 auto 28px;\n  max-width: 480px;\n  line-height: 1.7;\n}\n\n.ys-banner-btn {\n  display: inline-block;\n  background: #fff;\n  color: #E31837;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  text-decoration: none;\n  padding: 14px 32px;\n  border-radius: 2px;\n  transition: opacity 0.15s;\n  font-family: inherit;\n}\n\n.ys-banner-btn:hover { opacity: 0.9; }\n\n\/* MODAL *\/\n.ys-modal {\n  display: none;\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.92);\n  z-index: 99999;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n.ys-modal.open { display: flex; }\n\n.ys-modal-inner {\n  width: 100%;\n  max-width: 860px;\n  position: relative;\n}\n\n.ys-modal-close {\n  position: absolute;\n  top: -42px;\n  right: 0;\n  background: none;\n  border: none;\n  color: rgba(255,255,255,0.6);\n  font-size: 34px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  font-family: inherit;\n  transition: color 0.15s;\n}\n.ys-modal-close:hover { color: #fff; }\n\n.ys-iframe-wrap {\n  position: relative;\n  padding-bottom: 56.25%;\n  background: #000;\n  border-radius: 3px;\n  overflow: hidden;\n}\n.ys-iframe-wrap iframe {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n@media (max-width: 780px) {\n  .ys-grid { grid-template-columns: repeat(2, 1fr); }\n  .ys-section-heading { font-size: 2.1rem; }\n}\n\n@media (max-width: 500px) {\n  .ys-grid { grid-template-columns: 1fr; }\n  .ys-section-heading { font-size: 1.8rem; }\n  .ys-banner-heading { font-size: 1.8rem; }\n}\n<\/style>\n\n<div class=\"ys-section\">\n  <div class=\"ys-section-inner\">\n\n    <span class=\"ys-eyebrow\">Real People. Real Stories.<\/span>\n    <h2 class=\"ys-section-heading\">Youth Stories<\/h2>\n\n    <div class=\"ys-grid\">\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"brWnT16Y3wM\" aria-label=\"Watch Riley's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/brWnT16Y3wM\/maxresdefault.jpg\" alt=\"Riley\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Riley<\/h3>\n          <p class=\"ys-blurb\">Riley&#8217;s interest in photography and video has developed over the years. He wanted to grow as a film-maker so he spent time with Allen crafting his story, planning the visuals, and sharing his testimony in a cinematic way. It&#8217;s been awesome to watch Riley&#8217;s relationship with Jesus deepen, and we&#8217;re excited to share his story with you.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"jLVujDgpUr4\" aria-label=\"Watch Alexa's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/jLVujDgpUr4\/maxresdefault.jpg\" alt=\"Alexa\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Alexa<\/h3>\n          <p class=\"ys-blurb\">Alexa grew up around church, but for a long time faith felt more like rules than a real relationship with God. As she got older, she found herself surrounded by unhealthy influences and heavy drinking, and life began to spiral. Through the Backstage drop-in centre at YFC Steinbach, Alexa encountered people who genuinely cared about her and helped her see faith in a new way. She shares her story of rediscovering hope, finding a real relationship with Jesus, and learning that she was never walking through life alone.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"Y357BHwd5yI\" data-start=\"3\" aria-label=\"Watch Mikayla's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/Y357BHwd5yI\/maxresdefault.jpg\" alt=\"Mikayla\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Mikayla<\/h3>\n          <p class=\"ys-blurb\">Mikayla&#8217;s path back to feeling accepted by Jesus was filled with other people along the way showing her she was loved in every moment just as she was. She shares her story with us of finding her way back to church, and finding that belonging that we are all searching for. We&#8217;ve loved getting to see how her life was fully transformed by Jesus.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"v9L0k2I_naU\" aria-label=\"Watch Finn's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/v9L0k2I_naU\/maxresdefault.jpg\" alt=\"Finn\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Finn<\/h3>\n          <p class=\"ys-blurb\">Finn&#8217;s story is a hard one to hear. But it&#8217;s so important to hear stories like this. These stories show us the real things that are unfortunately common in our community. We hear a lot of stories like this, and it&#8217;s part of why we do what we do.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"I89JyEp-mBs\" aria-label=\"Watch Jorden's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/I89JyEp-mBs\/maxresdefault.jpg\" alt=\"Jorden\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Jorden<\/h3>\n          <p class=\"ys-blurb\">Jorden has been involved with YFC Steinbach for several years. His story is wild. He was willing to share some of it with us and we were more than happy to listen.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ys-card\">\n        <button class=\"ys-thumb-btn\" data-vid=\"964SMit2dT4\" aria-label=\"Watch Emily's story\">\n          <span class=\"ys-thumb\">\n            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/964SMit2dT4\/maxresdefault.jpg\" alt=\"Emily\" loading=\"lazy\">\n            <span class=\"ys-play\"><span class=\"ys-play-circle\"><svg viewBox=\"0 0 16 16\"><polygon points=\"3,1 13,8 3,15\"\/><\/svg><\/span><\/span>\n          <\/span>\n        <\/button>\n        <div class=\"ys-card-text\">\n          <h3 class=\"ys-name\">Emily<\/h3>\n          <p class=\"ys-blurb\">Emily&#8217;s journey of homelessness, foster care, exploitation and addiction led her to meeting Jesus. She has a heart for helping people and hopes that her story helps others see the hope and potential in themselves.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <div class=\"ys-banner\">\n    <span class=\"ys-banner-eyebrow\">Get Involved<\/span>\n    <h2 class=\"ys-banner-heading\">These Stories Need You In Them.<\/h2>\n    <p class=\"ys-banner-text\">Youth in our community are looking for people who will show up consistently and care. You don&#8217;t need a degree. You just need to be that person.<\/p>\n    <a href=\"https:\/\/yfc.ca\/steinbach\/volunteer\/\" class=\"ys-banner-btn\">Explore Volunteering<\/a>\n  <\/div>\n\n<\/div>\n\n<div class=\"ys-modal\" id=\"ys-modal\">\n  <div class=\"ys-modal-inner\">\n    <button class=\"ys-modal-close\" id=\"ys-close\" aria-label=\"Close video\">&times;<\/button>\n    <div class=\"ys-iframe-wrap\">\n      <iframe id=\"ys-iframe\" src=\"\" allow=\"autoplay; encrypted-media\" allowfullscreen title=\"Youth story video\"><\/iframe>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var modal = document.getElementById('ys-modal');\n  var iframe = document.getElementById('ys-iframe');\n  var closeBtn = document.getElementById('ys-close');\n\n  document.querySelectorAll('.ys-thumb-btn').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var vid = btn.getAttribute('data-vid');\n      var start = btn.getAttribute('data-start');\n      var src = 'https:\/\/www.youtube-nocookie.com\/embed\/' + vid + '?autoplay=1&rel=0';\n      if (start) src += '&start=' + start;\n      iframe.src = src;\n      modal.classList.add('open');\n      document.body.style.overflow = 'hidden';\n    });\n  });\n\n  function closeModal() {\n    iframe.src = '';\n    modal.classList.remove('open');\n    document.body.style.overflow = '';\n  }\n\n  closeBtn.addEventListener('click', closeModal);\n  modal.addEventListener('click', function(e) { if (e.target === modal) closeModal(); });\n  document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });\n\n  \/\/ Scroll-triggered fade-in\n  var observer = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if (entry.isIntersecting) {\n        var el = entry.target;\n        var delay = el.getAttribute('data-delay') || 0;\n        setTimeout(function() {\n          el.classList.add('ys-visible');\n        }, delay);\n        observer.unobserve(el);\n      }\n    });\n  }, { threshold: 0.12 });\n\n  \/\/ Eyebrow + heading\n  document.querySelectorAll('.ys-eyebrow, .ys-section-heading').forEach(function(el) {\n    observer.observe(el);\n  });\n\n  \/\/ Cards \u2014 stagger each one\n  document.querySelectorAll('.ys-card').forEach(function(card, i) {\n    card.setAttribute('data-delay', i * 80);\n    observer.observe(card);\n  });\n\n  \/\/ Banner\n  var banner = document.querySelector('.ys-banner');\n  if (banner) observer.observe(banner);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Real People. Real Stories. Youth Stories Riley Riley&#8217;s interest in photography and video has developed over the years. He wanted to grow as a film-maker so he spent time with Allen crafting his story, planning the visuals, and sharing his testimony in a cinematic way. It&#8217;s been awesome to watch Riley&#8217;s relationship with Jesus deepen, &hellip; <a href=\"https:\/\/yfc.ca\/steinbach\/youth-stories\/\">Continued<\/a><\/p>\n","protected":false},"author":17,"featured_media":2640,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2682","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/comments?post=2682"}],"version-history":[{"count":4,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682\/revisions"}],"predecessor-version":[{"id":2713,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682\/revisions\/2713"}],"wp:attachment":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/media?parent=2682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}