Fluid: Freigeben von Youtube.

Youtube und die Übermittlung von persönlichenn Daten

Ich vermeide gerne Consentbanner und nur weil Redakteure die Option haben möchten, Youtube-Videos einzubinden, will ich nicht jeden Besucher mit einem Consentbanner in Sippenhaft nehmen. Darum habe ich mir überlegt, wie ich über eine kleine Schummellei und mit einem örtlichen Eingriff den Aufbau einer externen Verbindung verhindern kann. Hier am Beispiel der FSC-Partials "Media/Rendering/Video.html":

 

 <f:if condition="{file.properties.mime_type} == 'video/youtube' || {file.properties.mime_type} == 'video/vimeo' ">
        <f:then>
            <script>

                function myFunction(item) {
                  var youtube = document.getElementById(item.dataset.aim);

                  if(youtube) {
                     var youtubesrc = youtube.src;
                     youtubesrc = youtubesrc.replace('protoreplacement','http');
                     document.getElementById(item.dataset.aim).src = youtubesrc;
                     $('.offline').removeClass('offline');
                     $('.disclaimer').remove();
                  }
                }

            </script>


            <div class="offline">
                <f:format.raw>
<v:format.replace substring="http" content ="{f:media(class:'video-embed-item', id:'media{file.properties.file}', file:file, width:dimensions.width,height:dimensions.height, alt:file.alternative, title:file.title, additionalConfig:settings.media.additionalConfig)}" replacement="protoReplacement" />
                </f:format.raw>
                <div class="disclaimer">
                    <p>Achtung: Hier wird das Video <strong>{file.title}</strong> als externer Inhalt angezeigt. Mit der Aktivierung stimmen Sie einer Übertragung Ihrer Internetadresse (IP) an Youtube- oder Vimeo-Servern zu. Beachten sie hierzu unseren <f:link.page pageUid="49" target="_blank">Datenschutzhinweis</f:link.page>.</p>
                    <button class="but" onclick="myFunction(this)" data-aim="media{file.properties.file}">Video ansehen</button>
                </div>

            </div>

        </f:then>
        <f:else>
            <f:media class="video-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" additionalConfig="{settings.media.additionalConfig}" />
        </f:else>

    </f:if>

 

Das passende SCSS: 

 

figure {
  iframe {
    width: 100%;
    height: auto;
    max-height: 800px;
    aspect-ratio:16 / 9;
    transition: max-height 250ms;
  }
  
  .offline {
    iframe {
      max-height: 0px;
      transition: max-height 250ms;
    }
  }  
}