{"id":106,"date":"2025-12-12T09:59:38","date_gmt":"2025-12-12T08:59:38","guid":{"rendered":"https:\/\/nerdsea.nl\/hoofdpagina\/?page_id=106"},"modified":"2026-08-01T17:21:54","modified_gmt":"2026-08-01T15:21:54","slug":"kaarten","status":"publish","type":"page","link":"https:\/\/nerdsea.nl\/hoofdpagina\/kaarten\/","title":{"rendered":"Kaarten"},"content":{"rendered":"\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2500\" height=\"713\" src=\"https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275.jpg\" alt=\"\" class=\"wp-image-85\" srcset=\"https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275.jpg 2500w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-300x86.jpg 300w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-1024x292.jpg 1024w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-768x219.jpg 768w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-1536x438.jpg 1536w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-2048x584.jpg 2048w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<style>\n    .video-selector,\n    .video-selector select,\n    .video-container {\n        box-sizing: border-box;\n    }\n\n  .video-selector {\n    position: sticky;\n    top: 0;\n    z-index: 200;\n    \n    \/* Borders *\/\n    border-top: 1px solid black;\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: none;\n\n    margin: 0 !important;\n    padding: 0 !important;\n\n    text-align: left;\n    display: flex;\n  }\n\n  \/* Style the dropdown *\/\n .video-selector select {\n    font-size: clamp(12px, 2vw, 18px);\n    font-weight: bold;\n    width: 100%;\n    height: clamp(20px, 6vw, 40px);\n    bottom: 50%;\n    padding-left: 5px;\n    border: none;\n\n    background-color: #ccc;\n    color: #fff;\n    cursor: pointer;\n    transition: all 0.2s ease;\n\n  \/* Forceer text naar links in dropdown en verwijder pijl in dropdown *\/\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  select:focus,\n  select:focus-visible {   \n    background-color: #ccc;\n    color: #fff;\n    border: none;\n    outline: none; \/* this removes the extra thick outline when it is selected*\/\n  }\n\n  select:hover {\n    border: none;\n    background-color: #eee;\n  }\n\n \/* add the custom arrow *\/\n .video-selector::after {\n    content: \"\";\n                        \n    position: absolute;\n    right: 10px;\n    top: 50%;   \/* keep 50% to make it pivot around its center *\/\n    transform: translateY(-50%); \/* keep -50% to make it pivot around its center *\/\n                        \n    width: clamp(12px, 2vw, 20px);\n    height: clamp(12px, 2vw, 20px);\n                        \n    background-image: url(\"https:\/\/nerdsea.nl\/tables\/arrow_top_chevron.svg\");\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n                        \n    pointer-events: none;\n                        \n    transition: transform 0.3s ease;\n    vertical-align: bottom;\n  }\n                        \n  \/* flip the custom arrow *\/\n  .video-selector.flipped::after {\n    transform: translateY(-50%) rotate(180deg);\n  }\n\n  \/* Video container styling *\/\n  .video-container {\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    padding: 0;\n\n    \/* Borders *\/\n    border-top: none;\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: 1px solid black;\n\n    text-align: center;\n    border-radius: 0px;\n  }\n\n  \/* Verwijder white space tussen dropdown en video *\/\n.video-selector + #video-container {\n  margin-block-start: 0 !important;\n}\n\n  video {\n    width: 100%;\n    height: auto;\n    display: block;\n    outline: none;\n  }\n<\/style>\n\n<div class=\"video-selector\">\n  <label for=\"video-select\"><\/label>\n  <select id=\"video-select\">\n    <option value=\"combined_wind_waves_and_swell.mp4\" selected=\"\">Windgolven en swell<\/option>\n    <option value=\"total_swell.mp4\">Swell<\/option>\n    <option value=\"wind_waves.mp4\">Windgolven<\/option>\n    <option value=\"combined_storm_surge_and_tide_&amp;_combined_wind-driven_and_tidal_currents.mp4\">Waterstand en stroming<\/option>\n    <option value=\"surface_winds.mp4\">Wind<\/option>\n  <\/select>\n<\/div>\n\n<div class=\"video-container\" id=\"video-container\">\n  <video controls=\"\">\n    <source src=\"https:\/\/nerdsea.nl\/videos\/combined_wind_waves_and_swell_height.mp4\" type=\"video\/mp4\">\n    Your browser does not support the video tag.\n  <\/video>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const BASE_VIDEO_URL = \"https:\/\/nerdsea.nl\/videos\/\";\n\n    const selector = document.querySelector(\".video-selector\");\n    const select = document.getElementById(\"video-select\");\n\n    const video = document.querySelector(\"#video-container video\");\n    const source = video.querySelector(\"source\");\n\n    \/* -----------------------------\n       Dropdown + arrow behaviour\n    ------------------------------ *\/\n\n    \/\/ Flip arrow when opening dropdown\n    select.addEventListener(\"mousedown\", () => {\n      selector.classList.add(\"flipped\");\n    });\n\n    \/\/ Close flip when losing focus\n    select.addEventListener(\"blur\", () => {\n      selector.classList.remove(\"flipped\");\n    });\n\n    \/\/ Handle keyboard navigation\n    select.addEventListener(\"keydown\", (e) => {\n      if (e.key === \"Escape\") {\n        selector.classList.remove(\"flipped\");\n      }\n    });\n\n    \/\/ Load default selected video on first page load\n    source.src = BASE_VIDEO_URL + select.value;\n    video.load();\n\n    \/\/ Change video when dropdown changes\n    select.addEventListener(\"change\", () => {\n      selector.classList.remove(\"flipped\");\n\n      source.src = BASE_VIDEO_URL + select.value;\n      video.load();\n    });\n});\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Windgolven en swellSwellWindgolvenWaterstand en stromingWind Your browser does not support the video tag.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":110,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":874,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/106\/revisions\/874"}],"wp:attachment":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}