MerginMaps · tomasMizera · Sep 11, 2025 · Sep 4, 2025 · Sep 4, 2025 · Sep 4, 2025
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "^3.1.0",
+    "@justinribeiro/lite-youtube": "^1.8.2",
     "smartlook-client": "^10.0.0"
   }
 }
diff --git a/src/.vitepress/components/YouTube.vue b/src/.vitepress/components/YouTube.vue
@@ -1,35 +1,21 @@
 <template>
-  <div>
-    <iframe type="text/html" width="100%" style="height:100%"
-            :src="`https://www.youtube.com/embed/${id}`"
-            frameborder="0" allowfullscreen></iframe>
-  </div>
+    <lite-youtube :videoid="id" :videotitle="title" posterquality="maxresdefault"></lite-youtube>
 </template>
 
 <script setup>
-defineProps({
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
   id: {
     type: String,
-    required: true
-  }
-})
+    required: true,
+  },
+  title: {
+    type: String,
+    default: "YouTube video",
+  },
+});
 </script>
 
 <style scoped>
-div {
-  background-color: #2c3e50;
-  width: 100%;
-  padding-top: min(500px,56%);
-  position: relative;
-  border: 3px solid #eaecef;
-}
-
-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-}
-</style>
+</style>
diff --git a/src/.vitepress/components/cookie-consent/components/CookieConsentBanner.vue b/src/.vitepress/components/cookie-consent/components/CookieConsentBanner.vue
@@ -11,14 +11,20 @@
       >
         Cookie Policy</a
       >
-      for more information. Deny cookies
-      <a class="cookie-consent-banner__text-link" @click="onDenyClick">here</a>.
+      for more information.
+      <a
+        href="#"
+        class="cookie-consent-banner__text-link"
+        @click.prevent="onDenyClick"
+        >Deny cookies here</a
+      >.
     </p>
     <div class="cookie-consent-banner__buttons">
       <a
+        href="#"
         class="cookie-consent-banner__text-link"
         :style="{ marginRight: '2rem' }"
-        @click="onPreferencesClick"
+        @click.prevent="onPreferencesClick"
       >
         Preferences</a
       ><cookie-consent-button @on-click="onAllowClick">

diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts
@@ -39,4 +39,29 @@ export default defineConfig({
       text: "Help us improve this page!",
     },
   },
+  transformPageData: (pageData) => {
+    pageData.frontmatter.head ??= [];
+    pageData.frontmatter.head.push([
+      "meta",
+      {
+        name: "og:title",
+        content: pageData.title,
+      },
+    ]);
+    pageData.frontmatter.head.push([
+      "meta",
+      {
+        name: "og:description",
+        content: pageData.description || "Mergin Maps Documentation",
+      },
+    ]),
+      pageData.frontmatter.head.push([
+        "meta",
+        {
+          name: "og:image",
+          content:
+            "https://merginmaps.com/opengraph.webp",
+        },
+      ]);
+  },
 });
diff --git a/src/.vitepress/theme/components/PageFooter.vue b/src/.vitepress/theme/components/PageFooter.vue
@@ -18,7 +18,7 @@
           <p>All rights reserved.</p>
         </div>
         <div class="page-footer__col">
-          <h4>Company</h4>
+          <p class="title">Company</p>
           <a href="https://merginmaps.com" target="__blank">Homepage</a>
           <a href="https://merginmaps.com/start-for-free" target="__blank"
             >Start for free</a
@@ -110,7 +110,7 @@ const darkMode = computed(() => data.isDark.value);
       color: var(--vp-c-brand-2);
     }
 
-    h4 {
+    .title {
       margin-top: 0;
       margin-bottom: 1rem;
     }

diff --git a/src/.vitepress/theme/components/SocialIconsLink.vue b/src/.vitepress/theme/components/SocialIconsLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="href" target="__blank">
+  <a :href="href" target="__blank" aria-label="Social link">
     <span>
       <svg height="1em" viewBox="0 0 496 512" fill="currentColor">
         <path

diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
@@ -12,6 +12,7 @@ import MMBanner from "./components/MMBanner.vue";
 import NotFound from "./NotFound.vue";
 import CookieConsentView from "../components/CookieConsentView.vue";
 
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -28,7 +29,10 @@ export default {
       }
     });
   },
-  enhanceApp({ app, router, siteData }) {
+  async enhanceApp({ app, router, siteData }) {
+    if (!import.meta.env.SSR) {
+      await import('@justinribeiro/lite-youtube')
+    }
     DefaultTheme.enhanceApp({ app, router, siteData });
     app.component("vImageViewer", vImageViewer);
     app.component('VPBadge', VPBadge);
@@ -59,5 +63,5 @@ export default {
   setup: () => {
     const route = useRoute();
     imageViewer(route);
-  },
+  }
 } satisfies Theme;
diff --git a/src/dev/dbsync/index.md b/src/dev/dbsync/index.md
@@ -3,7 +3,7 @@
 
 **DB Sync** is a tool that takes care of two-way synchronisation between <MainPlatformNameLink /> and PostGIS databases. The synchronisation works both ways: changes made in a PostGIS database are automatically pushed to a configured <MainPlatformName /> project and changes made in a GeoPackage in the <MainPlatformName /> project are pushed to the PostGIS database.
 
-<YouTube id="4mWcaKs9jkw" />
+<YouTube id="4mWcaKs9jkw" title="Connect PostGIS and Mergin Maps" />
 
 **Interested in using DB Sync?** Go to <GitHubRepo id="MerginMaps/db-sync" /> repository for the source code and a Quick start that will guide you through the steps to get DB Sync up and running. 
 

diff --git a/src/dev/media-sync/index.md b/src/dev/media-sync/index.md
@@ -5,7 +5,7 @@
 
 Media Sync has two sync modes: in copy mode, media files are only copied the external drive, while in the move mode, the files are copied and subsequently removed from <MainPlatformName /> project.
 
-<YouTube id="jAElsCZRBdc" />
+<YouTube id="jAElsCZRBdc" title="Move photos to MinIO/S3 with Mergin Maps"/>
 
 **Interested in using Media Sync?** Go to <GitHubRepo id="MerginMaps/media-sync" /> repository for the source code and more details. Here, you will also find the Quick start guide that will show you how to set up one way synchronisation between a new <MainPlatformName /> project and your existing bucket (<NoSpellcheck id="MinIO" /> or S3).
 
diff --git a/src/dev/work-packages/index.md b/src/dev/work-packages/index.md
@@ -4,7 +4,7 @@
 The **Work Packages** tool is designed to manage field surveys for multiple teams. This tool allows to create <MainPlatformName /> *work packages projects* that contain a subset of data of the main <MainPlatformNameLink/> project and set up two-way synchronisation between the main project and the dependent projects as illustrated here:
 ![Mergin Maps Work Packages](./wp-high-level.jpg "Mergin Maps Work Packages")
 
-<YouTube id="_iM-mql9by4" />
+<YouTube id="_iM-mql9by4" title="Manage multiple field teams with Mergin Maps"/>
 
 The main <MainPlatformNameLink/> project (*Survey*) contains all data. The admin of the main project can assign some of the data to working package projects (*Survey Team A*, *Survey Team B*). The teams can see and modify only the data that are assigned to them.
 

diff --git a/src/field/tracking/index.md b/src/field/tracking/index.md
@@ -3,7 +3,7 @@
 
 Position tracking is useful when you want to record your tracks during the field survey. This can help you know the extent of areas you have already surveyed in addition to the surveyed features.
 
-<YouTube id="64HXEb25D0Q" />
+<YouTube id="64HXEb25D0Q" title="Position tracking"/>
 
 ## Set up position tracking in QGIS project
 

diff --git a/src/gis/snapping/index.md b/src/gis/snapping/index.md
@@ -10,7 +10,7 @@ Capturing data in the field using <MobileAppName /> can be easier, if you can sn
 
 **Prefer video?** Here is a [video tutorial](https://youtu.be/aFG0iDuZZuI?si=3lBMlGV2Oqw7A3gg) on how to use snapping options in <MainPlatformName />:
 
-<YouTube id="aFG0iDuZZuI" />
+<YouTube id="aFG0iDuZZuI" title="Snapping" />
 
 ## Basic snapping
 To set up basic snapping:

diff --git a/src/index.md b/src/index.md
@@ -20,7 +20,7 @@ The ecosystem consist of various components:
 
 <AppDownload />
 
-<YouTube id="dy-B1BW9lA0" />
+<YouTube id="dy-B1BW9lA0" title="See how Mergin Maps works" />
 
 ## Get started 
 

diff --git a/src/layer/attach-multiple-photos-to-features/index.md b/src/layer/attach-multiple-photos-to-features/index.md
@@ -3,7 +3,7 @@
 
 In some situations, it might be useful to take more than one picture of a feature during the field survey. Attaching multiple photos to one feature is a 1-N relation. You can read more about 1-N relations and how they can be used in <MainPlatformNameLink /> in [How to link multiple records to one feature](../one-to-n-relations/).
 
-<YouTube id="NCa_Nb_CYno" />
+<YouTube id="NCa_Nb_CYno" title="Using multiple pictures per observation point" />
 
 :::tip Example project available
 To see this setup in practice, you can download the following project: 

diff --git a/src/layer/form-configuration/index.md b/src/layer/form-configuration/index.md
@@ -4,7 +4,7 @@
 In addition to setting up [edit widgets](../form-widgets/) and designing the [form layout](../form-layout/), extra configuration can be done to the fields in QGIS to make the data collection easier and more consistent.
 
 Here is a tutorial video on how to configure forms that includes the usage of default values and constraints:
-<YouTube id="jc4p1PpXj3k" />
+<YouTube id="jc4p1PpXj3k" title="Widgets for survey forms" />
 
 
 ## Default values
@@ -165,7 +165,7 @@ In the <MobileAppNameShort />, you will be unable to save a feature unless the f
 
 ## Drill-down forms
 
-<YouTube id="bXRclQFQFFE" />
+<YouTube id="bXRclQFQFFE" title="Drill-down forms" />
 
 Drill-down or cascade forms enable to list values in a field depending on a value selected in another field.
 

diff --git a/src/layer/form-widgets/index.md b/src/layer/form-widgets/index.md
@@ -7,7 +7,7 @@ Capturing field data often requires filling some attributes in the form to recor
 Extra configuration of attribute forms can be done to make data collection easier and more consistent, such as using default values, conditional visibility or constraint enforcement. These topics are covered in [Attributes Form Configuration](../form-configuration/) and [Attributes Form Layout](../form-layout/).
 
 Prefer video? Check out this tutorial on how to configure QGIS widgets for survey forms.
-<YouTube id="jc4p1PpXj3k" />
+<YouTube id="jc4p1PpXj3k" title="Widgets for survey forms" />
 
 ## Widget gallery
 Attributes forms can be configured using <QGISHelp ver="latest" link="user_manual/working_with_vector/vector_properties.html#edit-widgets" text="QGIS widget types" /> in the **Attributes Form** tab in the **Layer Properties**.
@@ -39,7 +39,7 @@ Here is an overview of widgets commonly used both in QGIS and the <MobileAppName
 
 ## Text
 
-<YouTube id="0Y5GKyjmfqo" />
+<YouTube id="0Y5GKyjmfqo" title="Text widgets" />
 
 Adding or editing text is the most common method for inserting information within the forms. In QGIS, the default widget for most types of fields is the **Text Edit**. It can be used for single line or [multiline](#multiline-text) text inputs. 
 
@@ -76,7 +76,7 @@ In the <MobileAppNameShort />, the **multiline text edit widget** will look like
 A QR code field is used in this public project: <MerginMapsProject id="documentation/form-widgets" />. Download or clone it to see this setup.
 :::
 
-<YouTube id="HptECoMY8ow" />
+<YouTube id="HptECoMY8ow" title="QR Code scanner" />
 
 To be able to scan QR codes using your camera, the field name or the field alias has to contain the word `qrcode` (the text is not case sensitive, it can be in combination of lower or upper case letters). 
 
@@ -93,7 +93,7 @@ This public project: <MerginMapsProject id="documentation/form-widgets" /> uses
 
 Number fields can be handled by the **Range** widget. Two options are supported by the <MobileAppNameShort />: [editable range](#range) and [slider](#slider). 
 
-<YouTube id="woZX3L33xh0" />
+<YouTube id="woZX3L33xh0" title="Numbers widget" />
 
 ### Range
 To set up the **editable range widget**:
@@ -132,7 +132,7 @@ In the <MobileAppNameShort />, the **Slider** looks like this. The number can be
 Various options of setting up Date and Date&Time fields are included in this public project: <MerginMapsProject id="documentation/form-widgets" />. Download or clone it to explore it in more detail.
 :::
 
-<YouTube id="EoIqYIl4-Xk" />
+<YouTube id="EoIqYIl4-Xk" title="Date widget" />
 
 **Date** or **Date and Time** fields can be used to record date and time. The most common use is to record when a feature was created or updated. This can be done manually or automatically by using [default values](../form-configuration/#default-values).
 
@@ -173,7 +173,7 @@ Here are some examples:
 Checkbox widget is used in this public project <MerginMapsProject id="documentation/form-widgets" />. Download or clone it to see the setup.
 :::
 
-<YouTube id="rtBdJzizdug" />
+<YouTube id="rtBdJzizdug" title="Checkbox widget" />
 
 Checkbox field becomes handy when you want to set up a Yes/No, True/False or On/Off in your field. 
 
@@ -214,7 +214,7 @@ Value map widget is used to select a value from a drop-down menu. Values are def
 
 If you want to use multiple selections in a field or need to add new values during the survey, check out the [Value Relation](#value-relation) widget.
 
-<YouTube id="WjotOTIKaNo" />
+<YouTube id="WjotOTIKaNo" title="Value Map" />
 
 :::tip Example project available
 This public project <MerginMapsProject id="documentation/form-widgets" /> contains a Value Map field. Download or clone it to see the setup.
@@ -238,7 +238,7 @@ Now you can select the value from a drop-down menu in the <MobileAppNameShort />
 This public project <MerginMapsProject id="documentation/form-widgets" /> contains a Value Relation setup. Download or clone it to explore it in more detail.
 :::
 
-<YouTube id="Sm1PZRN8rLw" />
+<YouTube id="Sm1PZRN8rLw" title="Value Relations" />
 
 The **Value Relation** widget is similar to the [Value Map](#value-map) widget, but the values for the drop-down menu come from another layer (usually a non-spatial table). 
 

diff --git a/src/manage/workspaces/index.md b/src/manage/workspaces/index.md
@@ -12,7 +12,7 @@ Users can be invited to a workspace as [members or guests](../permissions/). The
 Want to read more about workspaces and why they were introduced to <MainPlatformName />? Visit our blog [Introducing Workspaces: Simplified Collaboration](https://merginmaps.com/blog/introducing-workspaces-simplified-collaboration).
 :::
 
-<YouTube id="SZf93akn0tM" />
+<YouTube id="SZf93akn0tM" title="Getting started with your team" />
 
 :::tip Integrations and workspaces
 Integrations like [PostgreSQL DB Sync](../../dev/dbsync/), [Media Sync](../../dev/media-sync/) and [Work Packages](../../dev/work-packages/) do not share the concept of *active workspace*. They simply work with one specific project from any workspace.

diff --git a/src/misc/write-docs/index.md b/src/misc/write-docs/index.md
@@ -495,9 +495,9 @@ Use `<AppDownload />` component to display
 
 ### Embed YouTube content
 
-Use `<YouTube />` component, e.g. `<YouTube id="DQXrINUqiFI" />` transforms to
+Use `<YouTube />` component, e.g. `<YouTube id="DQXrINUqiFI" title="Title of video" />` transforms to
 
-<YouTube id="DQXrINUqiFI" />
+<YouTube id="DQXrINUqiFI" title="Title of video" />
 
 
 ## Spellcheck

diff --git a/src/server/administer/index.md b/src/server/administer/index.md
@@ -1,3 +1,7 @@
+---
+description: Custom Mergin Maps server configuration
+---
+
 # Administer
 
 Administration guide will help you to configure and maintain your <CommunityPlatformNameLink /> or <EnterprisePlatformNameLink />. <ServerCloudNameLink /> is maintained for you by <MainPlatformName /> team. Read more about server platforms in the [overview article](../).

diff --git a/src/server/index.md b/src/server/index.md
@@ -1,3 +1,7 @@
+---
+description: Overview for custom Mergin Maps server
+---
+
 # Overview
 
 SaaS <MainPlatformName /> service called <ServerCloudNameLink /> is a web platform for storage and synchronisation of data between mobile devices, <MainPlatformNameLink /> service and QGIS Desktop. 

diff --git a/yarn.lock b/yarn.lock
@@ -339,6 +339,11 @@
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
+"@justinribeiro/lite-youtube@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@justinribeiro/lite-youtube/-/lite-youtube-1.8.2.tgz#7b0b1b43623a52fe8381a8b84d8ee4153191fc14"
+  integrity sha512-wayU5sYA/e5J/1j7zFk8Hoi72Hk67Axy7Za2OFRzsytd9gvtv7ZeWhmdi2lOGbnXwMZHkeMsqxRGFxH60lo5bg==
+
 "@parcel/[email protected]":
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"