Basic

Diese Tunika ist das ganze Jahr tragbar. Das Muster wirkt in den Farbkombinationen lebensfroh ohne aufdringlich zu sein. Der leichtere Jacquard fällt schmeichelnd, der Ausschnitt ist mäßig rund und der Langarm eingesetzt.

/* Modal-Hintergrund */ .youtube-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; justify-content: center; align-items: center; } /* Modal-Inhalt mit weißem Rahmen */ .youtube-modal-content { position: relative; max-width: 800px; border: 3px solid white; /* Hier der neue Rahmen */ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Optional */ overflow: hidden; /* Wichtig für korrekte Darstellung */ padding: 10px 5px; background: #000; } /* Schließen-Button (X) */ .youtube-modal-close { position: absolute; top: -40px; right: 0; color: white; font-size: 30px; cursor: pointer; z-index: 10000; /* Über dem Rahmen */ } /* Responsives Video */ #youtube-player-zY9NDN8OlaM { width: 100%; aspect-ratio: 4/5; height:75vh; display: block; /* Entfernt Standard-Lücken */ } .video-button-wrapper { display: inline-block; /* oder flex, je nach Bedarf */ text-align: center; /* sorgt dafür, dass Button + Text mittig sind */ margin: 10px; /* Abstand zwischen den Blöcken */ } .video-button-wrapper small { display: block; /* Text unter den Button */ font-size: 0.8em; /* etwas kleiner */ margin-top: 4px; /* kleiner Abstand nach oben */ color: #555; /* etwas dezenter */ }

document.addEventListener('DOMContentLoaded', function() { // YouTube API laden (falls nicht vorhanden) if (typeof YT === 'undefined') { const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; document.body.appendChild(tag); } // Modal-Steuerung const buttons = document.querySelectorAll('.youtube-modal-button'); buttons.forEach(button => { const videoId = button.getAttribute('data-video-id'); const modal = document.getElementById(`youtube-modal-${videoId}`); const closeBtn = modal.querySelector('.youtube-modal-close'); let player; button.addEventListener('click', () => { modal.style.display = 'flex'; if (!player) { player = new YT.Player(`youtube-player-${videoId}`, { videoId: videoId, playerVars: { autoplay: 1, mute: 1, controls: 1, rel: 0 }, events: { 'onReady': function(event) { // Erzwinge 720p Qualität nachdem der Player geladen ist event.target.setPlaybackQuality('hd720'); event.target.playVideo(); }, 'onStateChange': (event) => { if (event.data === YT.PlayerState.ENDED) { modal.style.display = 'none'; } } } }); } else { // Video neu starten (wenn Player bereits existiert) player.seekTo(0); // Zurückspulen auf Start player.playVideo(); // Neu abspielen } }); closeBtn.addEventListener('click', () => { modal.style.display = 'none'; if (player) player.stopVideo(); }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; if (player) player.stopVideo(); } }); }); }); /* Modal-Hintergrund */ .youtube-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; justify-content: center; align-items: center; } /* Modal-Inhalt mit weißem Rahmen */ .youtube-modal-content { position: relative; max-width: 800px; border: 3px solid white; /* Hier der neue Rahmen */ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Optional */ overflow: hidden; /* Wichtig für korrekte Darstellung */ padding: 10px 5px; background: #000; } /* Schließen-Button (X) */ .youtube-modal-close { position: absolute; top: -40px; right: 0; color: white; font-size: 30px; cursor: pointer; z-index: 10000; /* Über dem Rahmen */ } /* Responsives Video */ #youtube-player-Jv82hJm-RqY { width: 100%; aspect-ratio: 4/5; height:75vh; display: block; /* Entfernt Standard-Lücken */ } .video-button-wrapper { display: inline-block; /* oder flex, je nach Bedarf */ text-align: center; /* sorgt dafür, dass Button + Text mittig sind */ margin: 10px; /* Abstand zwischen den Blöcken */ } .video-button-wrapper small { display: block; /* Text unter den Button */ font-size: 0.8em; /* etwas kleiner */ margin-top: 4px; /* kleiner Abstand nach oben */ color: #555; /* etwas dezenter */ } document.addEventListener('DOMContentLoaded', function() { // YouTube API laden (falls nicht vorhanden) if (typeof YT === 'undefined') { const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; document.body.appendChild(tag); } // Modal-Steuerung const buttons = document.querySelectorAll('.youtube-modal-button'); buttons.forEach(button => { const videoId = button.getAttribute('data-video-id'); const modal = document.getElementById(`youtube-modal-${videoId}`); const closeBtn = modal.querySelector('.youtube-modal-close'); let player; button.addEventListener('click', () => { modal.style.display = 'flex'; if (!player) { player = new YT.Player(`youtube-player-${videoId}`, { videoId: videoId, playerVars: { autoplay: 1, mute: 1, controls: 1, rel: 0 }, events: { 'onReady': function(event) { // Erzwinge 720p Qualität nachdem der Player geladen ist event.target.setPlaybackQuality('hd720'); event.target.playVideo(); }, 'onStateChange': (event) => { if (event.data === YT.PlayerState.ENDED) { modal.style.display = 'none'; } } } }); } else { // Video neu starten (wenn Player bereits existiert) player.seekTo(0); // Zurückspulen auf Start player.playVideo(); // Neu abspielen } }); closeBtn.addEventListener('click', () => { modal.style.display = 'none'; if (player) player.stopVideo(); }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; if (player) player.stopVideo(); } }); }); });