style: Enhance tutorial video management with URL normalization and improved preview functionality

Website/templates/my_tutorials.html

@@ -306,6 +306,7 @@
                     title="{{ tutorials[0].title }}"
                     frameborder="0" 
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                    referrerpolicy="strict-origin-when-cross-origin"
                     allowfullscreen>
             </iframe>
         </div>
@@ -343,7 +344,14 @@
         </h3>
         <div class="tutorials-grid">
             {% for tutorial in tutorials %}
-            <div class="tutorial-card" onclick="loadVideo('{{ tutorial.video_url }}', '{{ tutorial.title|safe }}', '{{ tutorial.description|safe }}', '{{ tutorial.category|default('Allgemein') }}', '{{ tutorial.duration|default('') }}')">
+            <div
+                class="tutorial-card"
+                data-video-url="{{ tutorial.video_url|e }}"
+                data-title="{{ tutorial.title|e }}"
+                data-description="{{ tutorial.description|default('', true)|e }}"
+                data-category="{{ tutorial.category|default('Allgemein', true)|e }}"
+                data-duration="{{ tutorial.duration|default('', true)|e }}"
+            >
                 <div class="tutorial-thumbnail">
                     {% if tutorial.thumbnail_url %}
                         <img src="{{ tutorial.thumbnail_url }}" alt="{{ tutorial.title }}" />
@@ -370,6 +378,11 @@
             const videoFrame = document.getElementById('videoFrame');
             const videoTitle = document.getElementById('videoTitle');
             const videoDescription = document.getElementById('videoDescription');
+
+            if (!videoUrl) {
+                alert('Dieses Video kann aktuell nicht geladen werden.');
+                return;
+            }
             
             videoFrame.src = videoUrl;
             videoTitle.textContent = title;
@@ -398,6 +411,18 @@
             const title = document.getElementById('videoTitle').textContent;
             window.location.href = `{{ url_for('user_tickets') }}?subject=Tutorial-Feedback: ${encodeURIComponent(title)}`;
         }
+
+        document.querySelectorAll('.tutorial-card').forEach((card) => {
+            card.addEventListener('click', () => {
+                loadVideo(
+                    card.dataset.videoUrl || '',
+                    card.dataset.title || '',
+                    card.dataset.description || '',
+                    card.dataset.category || 'Allgemein',
+                    card.dataset.duration || ''
+                );
+            });
+        });
     </script>
 
 {% else %}