Cookie consent banner does not work on Azure static website

[bimCelum]

Hello Community, I wanted to ask for your advice before opening a bug, because I don't know if what I'm encountering is actually a bug.

We have enabled the Google Analytics integration and the cookie consent banner with GA + a custom cookie for YouTube in our documentation repository.
Additionally, I have configured the "Manage your cookie consent" link in the footer, and implemented an additional consent-link that is shown if the visitor did not consent to the YouTube cookies and lands on a page where we have embedded a YouTube video. The YouTube-iframe is only loaded if consent was given, otherwise there's a placeholder image and the consent-link.

The thing is, that this works perfectly on localhost (running in a docker-container), but on the Azure preview environment, it is not working properly.
On the Preview environment, the cookie consent banner opens correctly on first page load, but when clicking on the consent-link in either the Footer or the YouTube placeholder, the URL changes to "/#__consent" as needed, but the cookie banner stays hidden and is not shown.

I've tried troubleshooting this with an FE dev, but we got wildly inconsistent behavior, with the consent-banner sometimes showing for her, but not for me, sometimes only when clicking the YouTube-placeholder link, sometimes only when clicking the Footer link, then again when switching to another page or opening the Preview environment in another browser, it was not working again.

What could be causing this?

Here are my relevant code sections from our markdown project:

Mkdocs.yml:

# just setting some values to override the source.html page
#repo_url: https://github.com/celum
#repo_name: celum/repo

extra:
  generator: false
  analytics:
    provider: google
    property: G-xxxxxxxx
    feedback:
      title: Was this page helpful?
      ratings:
        - icon: material/thumb-up-outline
          name: This page was helpful
          data: 1
          note: >-
            Thanks for your feedback, glad we could help!
        - icon: material/thumb-down-outline
          name: This page could be improved
          data: 0
          note: >-
            Thanks for your feedback! Help us improve this page by reporting in <a href="https://service.celum.com">our support portal</a>.
  consent:
    title: Cookie consent
    description: >-
      We use cookies to provide multi-media content, to recognise your repeated visits and preferences, as well as to measure the effectiveness of our documentation and whether users
      find what they're searching for. With your consent, you're helping us to make our documentation better.
    actions:
      - reject
      - manage
      - accept
    cookies:
      analytics:
        name: Google Analytics
        checked: false
      custom:
        name: YouTube
        checked: false

...

extra_javascript:
  - javascripts/custom.js
  - javascripts/custom_consent.js

copyright: © CELUM 2025 | <a href="https://www.celum.com/en/imprint/" title="Imprint">Imprint</a> | <a href="https://www.celum.com/en/privacy-policy/" title="Privacy Policy">Privacy Policy</a> | <a href="#__consent" title="Manage your cookie consent">Manage your cookie consent</a>

...

Javascript for creating the YouTube-placeholder if consent is not given:

document.addEventListener('DOMContentLoaded', function () {

    var consent = __md_get("__consent");

    var videoId = null;
    var videoSid = null;
    var videoTitle = null;

    var placeholder = null;
    var embedContainer;
    var placeholderOverlay = null;

    if (consent && consent.custom) {
        /* The user accepted the cookie */

        //Check whether there is a video placeholder on the current page
        placeholder = document.getElementById("youtube-placeholder-img");

        //Video placeholder found
        if (placeholder != null) {

            //Get youtube data from placeholder
            videoId = placeholder.dataset.videoid;
            videoSid = placeholder.dataset.videosid ? placeholder.dataset.videosid : '';
            videoTitle = placeholder.dataset.videotitle;

            var frameSrc = videoId + videoSid + "&rel=0";

            embedContainer = document.getElementsByClassName("youtube-embed-container")[0];

            //Container found
            if(embedContainer) {
                //add iframe to container
                embedContainer.innerHTML = '<iframe class="youtube-frame" src="//www.youtube-nocookie.com/embed/'
                    + frameSrc + '" '
                    + 'title="YouTube video player" '
                    + 'allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share" '
                    + 'referrerpolicy="strict-origin-when-cross-origin" '
                    + 'allowfullscreen>';

                //Remove placeholder
                placeholder.remove();

                placeholderOverlay = document.getElementsByClassName("youtube-placeholder-overlay")[0];

                if(placeholderOverlay != null) {
                    placeholderOverlay.remove();
                }
            }
        }
    } else {
        /* The user rejected the cookie */

        //Get youtube iframe
        var iframe=document.getElementsByClassName("youtube-frame")[0];

        //Get embedContainer
        embedContainer =  document.getElementsByClassName("youtube-embed-container")[0];

        if(embedContainer != null) {

            if(iframe != null) { //The iframe is loaded (consent was given previously and now withdrawn)

                var videoSrc = iframe.src.split("?");
                videoTitle=iframe.title;

                videoId = videoSrc[0];
                videoSid = videoSrc[1];

                //Remove iframe
                iframe.remove();

                //Create placeholder
                var placeholderSrc = videoId + ".webp";

                placeholder = document.createElement("img");
                placeholder.setAttribute("id", "youtube-placeholder-img");
                placeholder.classList.add("youtube-thumbnail");
                placeholder.setAttribute("data-videoId", videoId);
                placeholder.setAttribute(" data-videoSid", videoSid);
                placeholder.setAttribute("data-videoTitle", videoTitle);
                placeholder.setAttribute("src", placeholderSrc);

                embedContainer.append(placeholder);

            }
            else { //No iframe, consent was never given
                //Create cookie overlay for placeholder
                placeholderOverlay = document.createElement("div");
                placeholderOverlay.classList.add("youtube-placeholder-overlay");

                //Create overlay content
                var placeholderOverlayTitle = document.createElement("p");
                placeholderOverlayTitle.classList.add("youtube-cookie-hint-title");
                placeholderOverlayTitle.textContent = "We need your consent to load the YouTube Video service!";

                var placeholderOverlayContent = document.createElement("p");
                placeholderOverlayContent.textContent = "We use Youtube to embed video content that may collect data about your activity. Please accept the service cookies to watch this video.";

                var placeholderOverlayLink = document.createElement("a");
                placeholderOverlayLink.href = "#__consent";
                placeholderOverlayLink.textContent = "Manage your cookie consent";

                //Add content to overlay
                placeholderOverlay.append(placeholderOverlayTitle, placeholderOverlayContent, placeholderOverlayLink);

                embedContainer.append(placeholderOverlay);
            }
        }
    }
});

We also have some minor theme-overrides to enable Login into the documentation output via our own authentication service. This happens in custom.js, but I'm not sure if this has anything to do with the issue at hand.

Behavior on localhost:

Behavior on Preview environment:

If anybody has an idea of what is going on, please help. Any help would be much appreciated :)

Thanks, Birgit

[mocdaniel]

Quick heads-up: you might want to redact the G-Tag in your shared config by editing your question and deleting the old revision afterwards.