{"id":4721,"date":"2026-03-09T17:22:50","date_gmt":"2026-03-09T17:22:50","guid":{"rendered":"https:\/\/lossebeer.nl\/?post_type=cases&#038;p=4721"},"modified":"2026-03-17T10:02:05","modified_gmt":"2026-03-17T10:02:05","slug":"dpa","status":"publish","type":"cases","link":"https:\/\/lossebeer.nl\/index.php\/cases\/dpa\/","title":{"rendered":"DPA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4721\" class=\"elementor elementor-4721\" data-elementor-post-type=\"cases\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db06cab e-con-full e-flex e-con e-parent\" data-id=\"db06cab\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/lossebeer.nl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DPA-banner.mov&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-ca5ba5f e-con-full e-flex e-con e-child\" data-id=\"ca5ba5f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05f26fb elementor-widget elementor-widget-spacer\" data-id=\"05f26fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e512bb8 e-flex e-con-boxed e-con e-parent\" data-id=\"e512bb8\" data-element_type=\"container\" data-e-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<div class=\"elementor-element elementor-element-787398b e-con-full e-flex e-con e-child\" data-id=\"787398b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50ad507 elementor-widget elementor-widget-heading\" data-id=\"50ad507\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">DPA<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-175e8e5 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"175e8e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"case-nav\"><a class=\"case-item prev\" href=\"https:\/\/lossebeer.nl\/index.php\/cases\/sopra-steria\/\"><span class=\"case-direction\">\u2190 Vorige case<\/span><div class=\"case-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-768x432.png\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-768x432.png 768w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-300x169.png 300w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-1024x576.png 1024w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-1536x864.png 1536w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-at-14.46.20-2048x1152.png 2048w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/div><span class=\"case-title\">Sopra Steria<\/span><\/a><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e35f07f e-con-full e-flex e-con e-child\" data-id=\"e35f07f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-078a5b1 e-con-full e-flex e-con e-child\" data-id=\"078a5b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4b6c85 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"f4b6c85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1281\" height=\"864\" src=\"https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/DPA-logo-new-23.png\" class=\"attachment-full size-full wp-image-84\" alt=\"\" srcset=\"https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/DPA-logo-new-23.png 1281w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/DPA-logo-new-23-300x202.png 300w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/DPA-logo-new-23-1024x691.png 1024w, https:\/\/lossebeer.nl\/wp-content\/uploads\/2025\/05\/DPA-logo-new-23-768x518.png 768w\" sizes=\"(max-width: 1281px) 100vw, 1281px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-490945a e-con-full e-flex e-con e-child\" data-id=\"490945a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a03d62 elementor-widget elementor-widget-text-editor\" data-id=\"4a03d62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voor DPA Professionals ontwikkelen wij employerbranding en arbeidsmarkt gerelateerde content.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64bc8d6 e-flex e-con-boxed e-con e-parent\" data-id=\"64bc8d6\" data-element_type=\"container\" data-e-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<div class=\"elementor-element elementor-element-6a83318 e-con-full e-flex e-con e-child\" data-id=\"6a83318\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-265f1d4 elementor-widget elementor-widget-heading\" data-id=\"265f1d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Uitgelichte projecten<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f49461a e-flex e-con-boxed e-con e-parent\" data-id=\"f49461a\" data-element_type=\"container\" data-e-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<div class=\"elementor-element elementor-element-265c7b6 e-con-full e-flex e-con e-child\" data-id=\"265c7b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c0b7f4 elementor-widget elementor-widget-heading\" data-id=\"1c0b7f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Arbeidsmarkt series<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8806f82 elementor-widget elementor-widget-text-editor\" data-id=\"8806f82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Passies, drijfveren en professionele interesses.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-822407b e-con-full e-flex e-con e-child\" data-id=\"822407b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fff3cc0 elementor-widget elementor-widget-html\" data-id=\"fff3cc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <title>Spotlight Carrousel met YouTube & Vimeo<\/title>\n  <style>\n    body {\n      font-family: sans-serif;\n      margin: 0;\n      background: #f0f0f0;\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n    }\n\n    .carousel {\n      position: relative;\n      width: 100%;\n      max-width: 800px;\n      overflow: visible; \/* bolletjes mogen buiten vallen *\/\n      border-radius: 8px;\n      background: white;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n    }\n\n    .carousel-track {\n      display: flex;\n      transition: transform 0.3s ease;\n      will-change: transform;\n      user-select: none;\n      -webkit-overflow-scrolling: touch;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      scrollbar-width: none;\n    }\n    .carousel-track::-webkit-scrollbar {\n      display: none;\n    }\n\n    .video-thumbnail {\n      flex: 0 0 100%;\n      scroll-snap-align: start;\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n    }\n\n    .video-thumbnail img {\n      width: 100%;\n      border-radius: 8px;\n      height: auto;\n      aspect-ratio: 2 \/ 1;\n      object-fit: cover;\n      object-position: center;\n      display: block;\n    }\n\n    \/* Navigatie bolletjes *\/\n    .carousel-nav {\n      position: absolute;\n      bottom: -20px; \/* net buiten het frame *\/\n      left: 50%;\n      transform: translateX(-50%);\n      display: flex;\n      justify-content: center;\n      gap: 8px;\n      z-index: 10;\n    }\n\n    .carousel-nav button {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: none;\n      background: #ccc;\n      cursor: pointer;\n      transition: background 0.3s;\n      padding: 0;\n    }\n\n    .carousel-nav button.active {\n      background: #007bff;\n    }\n\n    \/* Overlay *\/\n    .overlay {\n      display: none;\n      position: fixed;\n      top: 0; left: 0;\n      width: 100vw;\n      height: 100vh;\n      background: rgba(0, 0, 0, 0.6);\n      justify-content: center;\n      align-items: center;\n      z-index: 9999;\n    }\n\n    .overlay iframe {\n      width: 80vw;\n      height: 45vw;\n      max-width: 960px;\n      max-height: 540px;\n      border: none;\n      border-radius: 8px;\n    }\n\n    @media (max-width: 768px) {\n      .overlay iframe {\n        width: 90vw;\n        height: 30vw;\n      }\n    }\n\n    \/* Pijltjes *\/\n    .arrow {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      background: rgba(0, 0, 0, 0.4);\n      border-radius: 50%;\n      width: 36px;\n      height: 36px;\n      color: white;\n      font-size: 24px;\n      line-height: 36px;\n      text-align: center;\n      cursor: pointer;\n      user-select: none;\n      z-index: 10;\n      transition: background 0.3s;\n    }\n\n    .arrow:hover {\n      background: rgba(0, 0, 0, 0.7);\n    }\n\n    .arrow-left {\n      left: 10px;\n    }\n\n    .arrow-right {\n      right: 10px;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"carousel\">\n  <div class=\"carousel-track\">\n      \n\n\n   <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1126748497\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1126748497.jpg\" alt=\"vimeo Video 1\" \/>\n    <\/div>\n    \n <!-- Vimeo video -->\n    <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1124986937\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1124986937.jpg\" alt=\"vimeo Video 1\" \/>\n   <\/div>\n\n   <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1124986769\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1124986769.jpg\" alt=\"vimeo Video 1\" \/>\n    <\/div>    \n    \n  <\/div>\n  \n  <div class=\"arrow arrow-left\">&#10094;<\/div>\n  <div class=\"arrow arrow-right\">&#10095;<\/div>\n  <div class=\"carousel-nav\"><\/div>\n<\/div>\n\n<!-- Overlay met iframe -->\n<div class=\"overlay\" id=\"videoOverlay\">\n  <iframe id=\"videoIframe\" src=\"\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const overlay = document.getElementById('videoOverlay');\n    const iframe = document.getElementById('videoIframe');\n\n    class Carousel {\n      constructor(root) {\n        this.root = root;\n        this.track = this.root.querySelector('.carousel-track');\n        this.thumbnails = this.track.querySelectorAll('.video-thumbnail');\n        this.nav = this.root.querySelector('.carousel-nav');\n        this.arrowLeft = this.root.querySelector('.arrow-left');\n        this.arrowRight = this.root.querySelector('.arrow-right');\n        this.currentIndex = 0;\n        this.total = this.thumbnails.length;\n\n        this.init();\n      }\n\n      init() {\n        \/\/ Maak bolletjes\n        this.nav.innerHTML = '';\n        for (let i = 0; i < this.total; i++) {\n          const btn = document.createElement('button');\n          if (i === 0) btn.classList.add('active');\n          btn.addEventListener('click', () => {\n            this.currentIndex = i;\n            this.updateCarousel();\n          });\n          this.nav.appendChild(btn);\n        }\n        this.navButtons = this.nav.querySelectorAll('button');\n\n        \/\/ Pijltjes\n        this.arrowLeft.addEventListener('click', () => this.prev());\n        this.arrowRight.addEventListener('click', () => this.next());\n\n        \/\/ Scroll detectie\n        this.track.addEventListener('scroll', () => this.onScroll());\n\n\/\/ Thumbnail click opent video (YouTube of Vimeo)\nthis.thumbnails.forEach(thumb => {\n  thumb.addEventListener('click', () => {\n    const provider = thumb.dataset.provider;\n    const videoID = thumb.dataset.videoid;\n\n    if (provider === \"youtube\") {\n      iframe.src = `https:\/\/www.youtube.com\/embed\/${videoID}?autoplay=1&modestbranding=1&rel=0&controls=1`;\n    } \n    else if (provider === \"vimeo\") {\n      iframe.src = `https:\/\/player.vimeo.com\/video\/${videoID}?autoplay=1&title=0&byline=0&portrait=0`;\n    }\n\n    overlay.style.display = 'flex';\n  });\n});\n\n        \/\/ Haal thumbnails op voor Vimeo\n        this.thumbnails.forEach(thumb => {\n          if (thumb.dataset.provider === \"vimeo\") {\n            const videoID = thumb.dataset.videoid;\n            fetch(`https:\/\/vimeo.com\/api\/oembed.json?url=https:\/\/vimeo.com\/${videoID}`)\n              .then(res => res.json())\n              .then(data => {\n                const img = thumb.querySelector('img');\n                if (img) img.src = data.thumbnail_url;\n              });\n          }\n        });\n\n        this.updateArrows();\n      }\n\n      updateCarousel() {\n        const width = this.track.clientWidth;\n        this.track.scrollTo({ left: width * this.currentIndex, behavior: 'smooth' });\n        this.navButtons.forEach((btn, idx) => {\n          btn.classList.toggle('active', idx === this.currentIndex);\n        });\n        this.updateArrows();\n      }\n\n      updateArrows() {\n        this.arrowLeft.style.display = this.currentIndex === 0 ? 'none' : 'block';\n        this.arrowRight.style.display = this.currentIndex === this.total - 1 ? 'none' : 'block';\n      }\n\n      onScroll() {\n        const width = this.track.clientWidth;\n        const scrollLeft = this.track.scrollLeft;\n        const newIndex = Math.round(scrollLeft \/ width);\n        if (newIndex !== this.currentIndex) {\n          this.currentIndex = newIndex;\n          this.navButtons.forEach((btn, idx) => {\n            btn.classList.toggle('active', idx === this.currentIndex);\n          });\n          this.updateArrows();\n        }\n      }\n\n      prev() {\n        if (this.currentIndex > 0) {\n          this.currentIndex--;\n          this.updateCarousel();\n        }\n      }\n\n      next() {\n        if (this.currentIndex < this.total - 1) {\n          this.currentIndex++;\n          this.updateCarousel();\n        }\n      }\n    }\n\n    \/\/ Init carrousel(s)\n    const carousels = document.querySelectorAll('.carousel');\n    carousels.forEach(c => new Carousel(c));\n\n    \/\/ Overlay sluiten\n    overlay.addEventListener('click', (e) => {\n      if (e.target === overlay) {\n        iframe.src = '';\n        overlay.style.display = 'none';\n      }\n    });\n  });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d2d78a elementor-widget elementor-widget-html\" data-id=\"2d2d78a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <title>Spotlight Carrousel met YouTube & Vimeo<\/title>\n  <style>\n    body {\n      font-family: sans-serif;\n      margin: 0;\n      background: #f0f0f0;\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n    }\n\n    .carousel {\n      position: relative;\n      width: 100%;\n      max-width: 800px;\n      overflow: visible; \/* bolletjes mogen buiten vallen *\/\n      border-radius: 8px;\n      background: white;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n    }\n\n    .carousel-track {\n      display: flex;\n      transition: transform 0.3s ease;\n      will-change: transform;\n      user-select: none;\n      -webkit-overflow-scrolling: touch;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      scrollbar-width: none;\n    }\n    .carousel-track::-webkit-scrollbar {\n      display: none;\n    }\n\n    .video-thumbnail {\n      flex: 0 0 100%;\n      scroll-snap-align: start;\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n    }\n\n    .video-thumbnail img {\n      width: 100%;\n      border-radius: 8px;\n      height: auto;\n      aspect-ratio: 2 \/ 1;\n      object-fit: cover;\n      object-position: center;\n      display: block;\n    }\n\n    \/* Navigatie bolletjes *\/\n    .carousel-nav {\n      position: absolute;\n      bottom: -20px; \/* net buiten het frame *\/\n      left: 50%;\n      transform: translateX(-50%);\n      display: flex;\n      justify-content: center;\n      gap: 8px;\n      z-index: 10;\n    }\n\n    .carousel-nav button {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: none;\n      background: #ccc;\n      cursor: pointer;\n      transition: background 0.3s;\n      padding: 0;\n    }\n\n    .carousel-nav button.active {\n      background: #007bff;\n    }\n\n    \/* Overlay *\/\n    .overlay {\n      display: none;\n      position: fixed;\n      top: 0; left: 0;\n      width: 100vw;\n      height: 100vh;\n      background: rgba(0, 0, 0, 0.6);\n      justify-content: center;\n      align-items: center;\n      z-index: 9999;\n    }\n\n    .overlay iframe {\n      width: 80vw;\n      height: 45vw;\n      max-width: 960px;\n      max-height: 540px;\n      border: none;\n      border-radius: 8px;\n    }\n\n    @media (max-width: 768px) {\n      .overlay iframe {\n        width: 90vw;\n        height: 30vw;\n      }\n    }\n\n    \/* Pijltjes *\/\n    .arrow {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      background: rgba(0, 0, 0, 0.4);\n      border-radius: 50%;\n      width: 36px;\n      height: 36px;\n      color: white;\n      font-size: 24px;\n      line-height: 36px;\n      text-align: center;\n      cursor: pointer;\n      user-select: none;\n      z-index: 10;\n      transition: background 0.3s;\n    }\n\n    .arrow:hover {\n      background: rgba(0, 0, 0, 0.7);\n    }\n\n    .arrow-left {\n      left: 10px;\n    }\n\n    .arrow-right {\n      right: 10px;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"carousel\">\n  <div class=\"carousel-track\">\n      \n <!-- Vimeo video -->\n    <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1126777897\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1126777897.jpg\" alt=\"vimeo Video 1\" \/>\n    <\/div>\n    \n <!-- Vimeo video -->\n    <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1126777873\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1126777873.jpg\" alt=\"youtube Video 1\" \/>\n    <\/div>\n    \n    \n <!-- Vimeo video -->\n    <div class=\"video-thumbnail\" data-provider=\"vimeo\" data-videoid=\"1126779004\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/1126779004.jpg\" alt=\"youtube Video 1\" \/>\n    <\/div>\n    \n\n  <\/div>\n  \n  <div class=\"arrow arrow-left\">&#10094;<\/div>\n  <div class=\"arrow arrow-right\">&#10095;<\/div>\n  <div class=\"carousel-nav\"><\/div>\n<\/div>\n\n<!-- Overlay met iframe -->\n<div class=\"overlay\" id=\"videoOverlay\">\n  <iframe id=\"videoIframe\" src=\"\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const overlay = document.getElementById('videoOverlay');\n    const iframe = document.getElementById('videoIframe');\n\n    class Carousel {\n      constructor(root) {\n        this.root = root;\n        this.track = this.root.querySelector('.carousel-track');\n        this.thumbnails = this.track.querySelectorAll('.video-thumbnail');\n        this.nav = this.root.querySelector('.carousel-nav');\n        this.arrowLeft = this.root.querySelector('.arrow-left');\n        this.arrowRight = this.root.querySelector('.arrow-right');\n        this.currentIndex = 0;\n        this.total = this.thumbnails.length;\n\n        this.init();\n      }\n\n      init() {\n        \/\/ Maak bolletjes\n        this.nav.innerHTML = '';\n        for (let i = 0; i < this.total; i++) {\n          const btn = document.createElement('button');\n          if (i === 0) btn.classList.add('active');\n          btn.addEventListener('click', () => {\n            this.currentIndex = i;\n            this.updateCarousel();\n          });\n          this.nav.appendChild(btn);\n        }\n        this.navButtons = this.nav.querySelectorAll('button');\n\n        \/\/ Pijltjes\n        this.arrowLeft.addEventListener('click', () => this.prev());\n        this.arrowRight.addEventListener('click', () => this.next());\n\n        \/\/ Scroll detectie\n        this.track.addEventListener('scroll', () => this.onScroll());\n\n\/\/ Thumbnail click opent video (YouTube of Vimeo)\nthis.thumbnails.forEach(thumb => {\n  thumb.addEventListener('click', () => {\n    const provider = thumb.dataset.provider;\n    const videoID = thumb.dataset.videoid;\n\n    if (provider === \"youtube\") {\n      iframe.src = `https:\/\/www.youtube.com\/embed\/${videoID}?autoplay=1&modestbranding=1&rel=0&controls=1`;\n    } \n    else if (provider === \"vimeo\") {\n      iframe.src = `https:\/\/player.vimeo.com\/video\/${videoID}?autoplay=1&title=0&byline=0&portrait=0`;\n    }\n\n    overlay.style.display = 'flex';\n  });\n});\n\n        \/\/ Haal thumbnails op voor Vimeo\n        this.thumbnails.forEach(thumb => {\n          if (thumb.dataset.provider === \"vimeo\") {\n            const videoID = thumb.dataset.videoid;\n            fetch(`https:\/\/vimeo.com\/api\/oembed.json?url=https:\/\/vimeo.com\/${videoID}`)\n              .then(res => res.json())\n              .then(data => {\n                const img = thumb.querySelector('img');\n                if (img) img.src = data.thumbnail_url;\n              });\n          }\n        });\n\n        this.updateArrows();\n      }\n\n      updateCarousel() {\n        const width = this.track.clientWidth;\n        this.track.scrollTo({ left: width * this.currentIndex, behavior: 'smooth' });\n        this.navButtons.forEach((btn, idx) => {\n          btn.classList.toggle('active', idx === this.currentIndex);\n        });\n        this.updateArrows();\n      }\n\n      updateArrows() {\n        this.arrowLeft.style.display = this.currentIndex === 0 ? 'none' : 'block';\n        this.arrowRight.style.display = this.currentIndex === this.total - 1 ? 'none' : 'block';\n      }\n\n      onScroll() {\n        const width = this.track.clientWidth;\n        const scrollLeft = this.track.scrollLeft;\n        const newIndex = Math.round(scrollLeft \/ width);\n        if (newIndex !== this.currentIndex) {\n          this.currentIndex = newIndex;\n          this.navButtons.forEach((btn, idx) => {\n            btn.classList.toggle('active', idx === this.currentIndex);\n          });\n          this.updateArrows();\n        }\n      }\n\n      prev() {\n        if (this.currentIndex > 0) {\n          this.currentIndex--;\n          this.updateCarousel();\n        }\n      }\n\n      next() {\n        if (this.currentIndex < this.total - 1) {\n          this.currentIndex++;\n          this.updateCarousel();\n        }\n      }\n    }\n\n    \/\/ Init carrousel(s)\n    const carousels = document.querySelectorAll('.carousel');\n    carousels.forEach(c => new Carousel(c));\n\n    \/\/ Overlay sluiten\n    overlay.addEventListener('click', (e) => {\n      if (e.target === overlay) {\n        iframe.src = '';\n        overlay.style.display = 'none';\n      }\n    });\n  });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3814b4 elementor-widget elementor-widget-html\" data-id=\"f3814b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <title>Spotlight Carrousel met YouTube & Vimeo<\/title>\n  <style>\n    body {\n      font-family: sans-serif;\n      margin: 0;\n      background: #f0f0f0;\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n    }\n\n    .carousel {\n      position: relative;\n      width: 100%;\n      max-width: 800px;\n      overflow: visible; \/* bolletjes mogen buiten vallen *\/\n      border-radius: 8px;\n      background: white;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n    }\n\n    .carousel-track {\n      display: flex;\n      transition: transform 0.3s ease;\n      will-change: transform;\n      user-select: none;\n      -webkit-overflow-scrolling: touch;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      scrollbar-width: none;\n    }\n    .carousel-track::-webkit-scrollbar {\n      display: none;\n    }\n\n    .video-thumbnail {\n      flex: 0 0 100%;\n      scroll-snap-align: start;\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n    }\n\n    .video-thumbnail img {\n      width: 100%;\n      border-radius: 8px;\n      height: auto;\n      aspect-ratio: 2 \/ 1;\n      object-fit: cover;\n      object-position: center;\n      display: block;\n    }\n\n    \/* Navigatie bolletjes *\/\n    .carousel-nav {\n      position: absolute;\n      bottom: -20px; \/* net buiten het frame *\/\n      left: 50%;\n      transform: translateX(-50%);\n      display: flex;\n      justify-content: center;\n      gap: 8px;\n      z-index: 10;\n    }\n\n    .carousel-nav button {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: none;\n      background: #ccc;\n      cursor: pointer;\n      transition: background 0.3s;\n      padding: 0;\n    }\n\n    .carousel-nav button.active {\n      background: #007bff;\n    }\n\n    \/* Overlay *\/\n    .overlay {\n      display: none;\n      position: fixed;\n      top: 0; left: 0;\n      width: 100vw;\n      height: 100vh;\n      background: rgba(0, 0, 0, 0.6);\n      justify-content: center;\n      align-items: center;\n      z-index: 9999;\n    }\n\n    .overlay iframe {\n      width: 80vw;\n      height: 45vw;\n      max-width: 960px;\n      max-height: 540px;\n      border: none;\n      border-radius: 8px;\n    }\n\n    @media (max-width: 768px) {\n      .overlay iframe {\n        width: 90vw;\n        height: 30vw;\n      }\n    }\n\n    \/* Pijltjes *\/\n    .arrow {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      background: rgba(0, 0, 0, 0.4);\n      border-radius: 50%;\n      width: 36px;\n      height: 36px;\n      color: white;\n      font-size: 24px;\n      line-height: 36px;\n      text-align: center;\n      cursor: pointer;\n      user-select: none;\n      z-index: 10;\n      transition: background 0.3s;\n    }\n\n    .arrow:hover {\n      background: rgba(0, 0, 0, 0.7);\n    }\n\n    .arrow-left {\n      left: 10px;\n    }\n\n    .arrow-right {\n      right: 10px;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"carousel\">\n  <div class=\"carousel-track\">\n      \n <!-- Vimeo video -->\n    <div class=\"video-thumbnail\" data-provider=\"youtube\" data-videoid=\"v87ZkK2vwg4\">\n      <img decoding=\"async\" src=\"https:\/\/vumbnail.com\/v87ZkK2vwg4.jpg\" alt=\"youtube Video 1\" \/>\n    <\/div>\n  <\/div>\n  \n  <div class=\"arrow arrow-left\">&#10094;<\/div>\n  <div class=\"arrow arrow-right\">&#10095;<\/div>\n  <div class=\"carousel-nav\"><\/div>\n<\/div>\n\n<!-- Overlay met iframe -->\n<div class=\"overlay\" id=\"videoOverlay\">\n  <iframe id=\"videoIframe\" src=\"\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const overlay = document.getElementById('videoOverlay');\n    const iframe = document.getElementById('videoIframe');\n\n    class Carousel {\n      constructor(root) {\n        this.root = root;\n        this.track = this.root.querySelector('.carousel-track');\n        this.thumbnails = this.track.querySelectorAll('.video-thumbnail');\n        this.nav = this.root.querySelector('.carousel-nav');\n        this.arrowLeft = this.root.querySelector('.arrow-left');\n        this.arrowRight = this.root.querySelector('.arrow-right');\n        this.currentIndex = 0;\n        this.total = this.thumbnails.length;\n\n        this.init();\n      }\n\n      init() {\n        \/\/ Maak bolletjes\n        this.nav.innerHTML = '';\n        for (let i = 0; i < this.total; i++) {\n          const btn = document.createElement('button');\n          if (i === 0) btn.classList.add('active');\n          btn.addEventListener('click', () => {\n            this.currentIndex = i;\n            this.updateCarousel();\n          });\n          this.nav.appendChild(btn);\n        }\n        this.navButtons = this.nav.querySelectorAll('button');\n\n        \/\/ Pijltjes\n        this.arrowLeft.addEventListener('click', () => this.prev());\n        this.arrowRight.addEventListener('click', () => this.next());\n\n        \/\/ Scroll detectie\n        this.track.addEventListener('scroll', () => this.onScroll());\n\n\/\/ Thumbnail click opent video (YouTube of Vimeo)\nthis.thumbnails.forEach(thumb => {\n  thumb.addEventListener('click', () => {\n    const provider = thumb.dataset.provider;\n    const videoID = thumb.dataset.videoid;\n\n    if (provider === \"youtube\") {\n      iframe.src = `https:\/\/www.youtube.com\/embed\/${videoID}?autoplay=1&modestbranding=1&rel=0&controls=1`;\n    } \n    else if (provider === \"vimeo\") {\n      iframe.src = `https:\/\/player.vimeo.com\/video\/${videoID}?autoplay=1&title=0&byline=0&portrait=0`;\n    }\n\n    overlay.style.display = 'flex';\n  });\n});\n\n        \/\/ Haal thumbnails op voor Vimeo\n        this.thumbnails.forEach(thumb => {\n          if (thumb.dataset.provider === \"vimeo\") {\n            const videoID = thumb.dataset.videoid;\n            fetch(`https:\/\/vimeo.com\/api\/oembed.json?url=https:\/\/vimeo.com\/${videoID}`)\n              .then(res => res.json())\n              .then(data => {\n                const img = thumb.querySelector('img');\n                if (img) img.src = data.thumbnail_url;\n              });\n          }\n        });\n\n        this.updateArrows();\n      }\n\n      updateCarousel() {\n        const width = this.track.clientWidth;\n        this.track.scrollTo({ left: width * this.currentIndex, behavior: 'smooth' });\n        this.navButtons.forEach((btn, idx) => {\n          btn.classList.toggle('active', idx === this.currentIndex);\n        });\n        this.updateArrows();\n      }\n\n      updateArrows() {\n        this.arrowLeft.style.display = this.currentIndex === 0 ? 'none' : 'block';\n        this.arrowRight.style.display = this.currentIndex === this.total - 1 ? 'none' : 'block';\n      }\n\n      onScroll() {\n        const width = this.track.clientWidth;\n        const scrollLeft = this.track.scrollLeft;\n        const newIndex = Math.round(scrollLeft \/ width);\n        if (newIndex !== this.currentIndex) {\n          this.currentIndex = newIndex;\n          this.navButtons.forEach((btn, idx) => {\n            btn.classList.toggle('active', idx === this.currentIndex);\n          });\n          this.updateArrows();\n        }\n      }\n\n      prev() {\n        if (this.currentIndex > 0) {\n          this.currentIndex--;\n          this.updateCarousel();\n        }\n      }\n\n      next() {\n        if (this.currentIndex < this.total - 1) {\n          this.currentIndex++;\n          this.updateCarousel();\n        }\n      }\n    }\n\n    \/\/ Init carrousel(s)\n    const carousels = document.querySelectorAll('.carousel');\n    carousels.forEach(c => new Carousel(c));\n\n    \/\/ Overlay sluiten\n    overlay.addEventListener('click', (e) => {\n      if (e.target === overlay) {\n        iframe.src = '';\n        overlay.style.display = 'none';\n      }\n    });\n  });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7468662 e-flex e-con-boxed e-con e-parent\" data-id=\"7468662\" data-element_type=\"container\" data-e-type=\"container\">\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DPA Voor DPA Professionals ontwikkelen wij employerbranding en arbeidsmarkt gerelateerde content.\u00a0 Uitgelichte projecten Arbeidsmarkt series Passies, drijfveren en professionele interesses. Spotlight Carrousel met YouTube &#038; Vimeo &#10094; &#10095; Spotlight Carrousel met YouTube &#038; Vimeo &#10094; &#10095; Spotlight Carrousel met YouTube &#038; Vimeo &#10094; &#10095;<\/p>\n","protected":false},"featured_media":2018,"template":"","cases":[],"class_list":["post-4721","cases","type-cases","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/cases\/4721"}],"collection":[{"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/cases"}],"about":[{"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/types\/cases"}],"version-history":[{"count":10,"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/cases\/4721\/revisions"}],"predecessor-version":[{"id":5406,"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/cases\/4721\/revisions\/5406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/media\/2018"}],"wp:attachment":[{"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/media?parent=4721"}],"wp:term":[{"taxonomy":"cases","embeddable":true,"href":"https:\/\/lossebeer.nl\/index.php\/wp-json\/wp\/v2\/cases?post=4721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}