{"id":9966,"date":"2026-10-10T16:10:33","date_gmt":"2026-10-10T14:10:33","guid":{"rendered":"https:\/\/wiesengrund-hamberg.de\/wordpress\/?p=9966"},"modified":"2026-10-10T19:52:24","modified_gmt":"2026-10-10T17:52:24","slug":"festzug-im-360-video-rueckblick","status":"publish","type":"post","link":"https:\/\/wiesengrund-hamberg.de\/wordpress\/2026\/10\/10\/festzug-im-360-video-rueckblick\/","title":{"rendered":"Festzug im 360\u00b0 Video-R\u00fcckblick"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Passend zu unserem Weinfest und Helferfest gibt es einen sch\u00f6nen R\u00fcckblick auf unser Festwochenende im Mai. Auf unserem neuen <a href=\"https:\/\/www.youtube.com\/@wiesengrund-hamberg\">YouTube-Kanal<\/a> ist der gesamte <strong><a href=\"https:\/\/www.youtube.com\/watch?v=d8O7_urZx-E\">Festzug zum 75-j\u00e4hrigen Jubil\u00e4um des Sch\u00fctzenvereins \u201eWiesengrund\u201c Hamberg<\/a><\/strong> als 360\u00b0-Video zu sehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Von der Aufstellung bis zum Einmarsch ins Festzelt k\u00f6nnt ihr den Festumzug im Rundum-Blick miterleben und die Blickrichtung am Computer oder Handy mit Maus oder Finger selbst \u00e4ndern. So entdeckt ihr, wer am Stra\u00dfenrand stand und welche Gastvereine vorbeimarschiert sind. \u00dcber die Zeitleiste in der YouTube-Beschreibung kann man direkt zu einzelnen Vereinen und Blaskapellen springen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein herzliches Dankesch\u00f6n an unser Taferl-M\u00e4del, das flei\u00dfig unser Vereinstaferl samt Kamera durchs Dorf getragen hat. Viel Freude mit diesem einmaligen Blick auf unseren Festzug!<\/p>\n\n\n\n<!-- YouTube 360\u00b0 Video mit Rundumblick-Steuerung -->\n\n<div id=\"rundumblick-container\" style=\"width:100%; aspect-ratio:16\/9; position:relative;\">\n\n  <iframe\n    id=\"rundumblick-video\"\n    src=\"https:\/\/www.youtube-nocookie.com\/embed\/d8O7_urZx-E?rel=0&amp;playsinline=1&amp;enablejsapi=1\"\n    title=\"Interactive 360\u00b0 Video\"\n    style=\"width:100%; height:100%; border:0;\"\n    allow=\"accelerometer; autoplay; gyroscope; encrypted-media; picture-in-picture; fullscreen\"\n    allowfullscreen=\"\">\n  <\/iframe>\n\n  <div id=\"rundumblick-overlay\"><\/div>\n\n<\/div>\n\n<div id=\"rundumblick-controls\">\n  <button type=\"button\" id=\"rundumblick-toggle\">\n    Rundumblick aktivieren\n  <\/button>\n  <span id=\"rundumblick-status\" role=\"status\"><\/span>\n<\/div>\n\n<style>\n#rundumblick-container {\n  background: #000;\n  overflow: hidden;\n}\n\n#rundumblick-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 65px;\n  z-index: 2;\n\n  display: none;\n  cursor: grab;\n  touch-action: none;\n  background: transparent;\n}\n\n#rundumblick-overlay.active {\n  display: block;\n}\n\n#rundumblick-overlay.dragging {\n  cursor: grabbing;\n}\n\n#rundumblick-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 10px;\n  background: #fff;\n  font-family: Arial, sans-serif;\n}\n\n#rundumblick-toggle {\n  appearance: none;\n  padding: 10px 16px;\n  border: 1px solid #d0d4da;\n  border-radius: 6px;\n  background: #f4f5f7;\n  color: #222;\n  font-size: 14px;\n  line-height: 1.4;\n  cursor: pointer;\n}\n\n#rundumblick-toggle:hover {\n  background: #e4e8ee;\n}\n\n#rundumblick-toggle.active {\n  background: #222;\n  color: #fff;\n  border-color: #222;\n}\n\n#rundumblick-status {\n  font-size: 13px;\n  color: #666;\n}\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  const iframe = document.getElementById(\"rundumblick-video\");\n  const overlay = document.getElementById(\"rundumblick-overlay\");\n  const button = document.getElementById(\"rundumblick-toggle\");\n  const status = document.getElementById(\"rundumblick-status\");\n\n  if (!iframe || !overlay || !button) return;\n\n  let player = null;\n  let ready = false;\n  let enabled = false;\n  let dragging = false;\n\n  let yaw = 0;\n  let pitch = 0;\n  let fov = 100;\n\n  let lastX = 0;\n  let lastY = 0;\n\n  function getSphericalProperties() {\n    if (!ready || !player) return null;\n\n    try {\n      const properties = player.getSphericalProperties();\n\n      if (\n        properties &&\n        typeof properties.yaw === \"number\" &&\n        typeof properties.pitch === \"number\"\n      ) {\n        return properties;\n      }\n    } catch (error) {\n      console.warn(\"360\u00b0-API nicht verf\u00fcgbar:\", error);\n    }\n\n    return null;\n  }\n\n  function updateView() {\n    if (!getSphericalProperties()) return;\n\n    try {\n      player.setSphericalProperties({\n        yaw: yaw,\n        pitch: pitch,\n        fov: fov\n      });\n    } catch (error) {\n      console.warn(\"Blickrichtung konnte nicht ge\u00e4ndert werden:\", error);\n    }\n  }\n\n  function setEnabled(value) {\n    enabled = value;\n\n    overlay.classList.toggle(\"active\", enabled);\n    button.classList.toggle(\"active\", enabled);\n\n    button.textContent = enabled\n      ? \"Rundumblick deaktivieren\"\n      : \"Rundumblick aktivieren\";\n\n    status.textContent = enabled\n      ? \"Mit Maus oder Finger das Bild verschieben\"\n      : \"\";\n  }\n\n  function initializePlayer() {\n    if (player || !window.YT || !window.YT.Player) return;\n\n    player = new YT.Player(\"rundumblick-video\", {\n      events: {\n        onReady: function () {\n          ready = true;\n\n          const properties = getSphericalProperties();\n\n          if (properties) {\n            yaw = properties.yaw;\n            pitch = properties.pitch;\n            fov = properties.fov || 100;\n          }\n        }\n      }\n    });\n  }\n\n  \/\/ YouTube IFrame API laden\n  if (window.YT && window.YT.Player) {\n    initializePlayer();\n  } else {\n    const previousCallback = window.onYouTubeIframeAPIReady;\n\n    window.onYouTubeIframeAPIReady = function () {\n      if (typeof previousCallback === \"function\") {\n        previousCallback();\n      }\n\n      initializePlayer();\n    };\n\n    if (!document.querySelector('script[src*=\"youtube.com\/iframe_api\"]')) {\n      const script = document.createElement(\"script\");\n      script.src = \"https:\/\/www.youtube.com\/iframe_api\";\n      document.head.appendChild(script);\n    }\n  }\n\n  \/\/ Rundumblick aktivieren oder deaktivieren\n  button.addEventListener(\"click\", function () {\n    if (!ready) {\n      status.textContent = \"YouTube-Player wird geladen \u2026\";\n      return;\n    }\n\n    const properties = getSphericalProperties();\n\n    if (!properties) {\n      status.textContent = \"Das Video muss erst gestartet werden.\";\n      return;\n    }\n\n    if (!enabled) {\n      yaw = properties.yaw;\n      pitch = properties.pitch;\n      fov = properties.fov || 100;\n    }\n\n    setEnabled(!enabled);\n  });\n\n  \/\/ Maus- und Touchsteuerung\n  overlay.addEventListener(\"pointerdown\", function (event) {\n    if (!enabled) return;\n\n    dragging = true;\n    lastX = event.clientX;\n    lastY = event.clientY;\n\n    overlay.setPointerCapture(event.pointerId);\n    overlay.classList.add(\"dragging\");\n  });\n\n  overlay.addEventListener(\"pointermove\", function (event) {\n    if (!dragging) return;\n\n    const dx = event.clientX - lastX;\n    const dy = event.clientY - lastY;\n\n    \/\/ Nat\u00fcrliche Panoramabewegung:\n    \/\/ Das Bild folgt der Maus in alle vier Richtungen.\n\n    yaw = ((yaw + dx * 0.25) % 360 + 360) % 360;\n\n    pitch = Math.max(\n      -90,\n      Math.min(90, pitch + dy * 0.25)\n    );\n\n    lastX = event.clientX;\n    lastY = event.clientY;\n\n    updateView();\n  });\n\n  function stopDragging() {\n    dragging = false;\n    overlay.classList.remove(\"dragging\");\n  }\n\n  overlay.addEventListener(\"pointerup\", stopDragging);\n  overlay.addEventListener(\"pointercancel\", stopDragging);\n  overlay.addEventListener(\"lostpointercapture\", stopDragging);\n\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Falls die Panorama-Funktion hier nicht klappt, direkt auf YouTube \u00f6ffnen: <a href=\"https:\/\/youtu.be\/d8O7_urZx-E\">https:\/\/youtu.be\/d8O7_urZx-E<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Passend zu unserem Weinfest und Helferfest gibt es einen sch\u00f6nen R\u00fcckblick auf unser Festwochenende im Mai. Auf unserem neuen YouTube-Kanal ist der gesamte Festzug zum 75-j\u00e4hrigen Jubil\u00e4um des Sch\u00fctzenvereins \u201eWiesengrund\u201c Hamberg als 360\u00b0-Video zu sehen. Von der Aufstellung bis zum Einmarsch ins Festzelt k\u00f6nnt ihr den Festumzug im Rundum-Blick miterleben<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9966","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"_links":{"self":[{"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/posts\/9966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/comments?post=9966"}],"version-history":[{"count":13,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/posts\/9966\/revisions"}],"predecessor-version":[{"id":10002,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/posts\/9966\/revisions\/10002"}],"wp:attachment":[{"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/media?parent=9966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/categories?post=9966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiesengrund-hamberg.de\/wordpress\/wp-json\/wp\/v2\/tags?post=9966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}