YouTube-Videos mit eigenen Overlays

1.
Im Folgenden wird gezeigt, wie man YouTube-Videos horizontal zentriert in seine Website einbetten und überdies eigene Overlays über sie legen kann. Sämtliche auf dieser Seite präsentierten Codes samt Anwendungsbeispielen können Sie hier downloaden:

youtube_videos Herunterladen

In der obigen Datei sind alle unter Punkt 2. und 3. präsentierten Codes enthalten:

Punkt 2: Codes, wenn Videos nach dem Klick auf das Overlay nicht automatisch abgespielt werden sollen
Punkt 3: Codes, wenn Videos nach dem Klick auf das Overlay automatisch abgespielt werden sollen.

1.1
Im ersten, unten gezeigten Video wird als Overlay kein Bild verwendet, sondern eine mit CSS (Element: .video-overlay) gestylte Oberfläche. Über diese Oberfläche wird ein Abspielbutton gelegt (Element: .play-button-2). Klickt man auf das Overlay, erscheint das YouTube-Video mit allen Steuerelementen. Das Video wird nicht automatisch abgespielt, sondern erst gestartet, sobald man den Abspielbutton anklickt.

1.2
Im zweiten Video wird als Overlay nicht das vom Ersteller des Videos festgelegte Vorschaubild genutzt, sondern ein eigenes Bild. Klickt man auf das Overlay (Bild), erscheint das YouTube-Video mit allen Steuerelementen. Das Video wird nicht automatisch abgespielt, sondern erst gestartet, sobald man den Abspielbutton anklickt.

1.3
In den Punkten 2. und 3. wird auch der Code für eine dritte Variante der Einbettung (Video 3) präsentiert. Bei dieser Variante wird als Overlay das vom Ersteller des Videos festgelegte Vorschaubild genutzt. Über dieses Bild wird ein Abspielbutton (Element: .play-button) gelegt. Klickt man auf das Overlay (Bild), erscheint das YouTube-Video mit allen Steuerelementen. Das Video wird – je nach Konfiguration – ohne weiteres Zutun oder erst gestartet, sobald man den Abspielbutton anklickt.

1.4
Die für die Videos genutzten Bilder können durch beliebige eigene Bilder ersetzt werden. Das abzuspielende Video muss durch Angabe der ID konkretisiert werden. Diese wird angezeigt, wenn man auf YouTube beim einzubindenden Video auf Teilen > Einbetten klickt. Die ID ist jeweils die vor dem Fragezeichen (?) angezeigte -11 Zeichen umfassende – Buchstaben- und Zahlenkombination, z. B. „JGQ75bVLJP8“

2.
Hier finden Sie den vollständigen Code für die beiden oben präsentierten Videos sowie für ein weiteres Video, sofern die Videos nach einem Klick auf das Overlay NICHT AUTOMATISCH abgespielt werden sollen, sondern erst nach dem Erscheinen der YouTube-Steuerelemente und nach dem Betätigen des Start-Buttons:


<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Video mit Click-to-Play</title>
      <style>
         body  {
         background: #494352;
         width: 100%;
         }
     
     	 /* Video 1
         ============================= 
         =============================
         =============================
         */
      
         .youtube-body {
         display: flex;
         justify-content: center;
         margin: 0;
         }
         /* Container mit flexibler Breite und Seitenverhältnis */
         .youtube-container {
         width: 100%;
         max-width: 800px;
         position: relative;
         aspect-ratio: 16 / 9; /* 16:9 Seitenverhältnis */
         background: #000; /* Hintergrundfarbe falls Video nicht lädt */
         }
         .video-content {
         position: absolute;
         width: 100%;
         height: 100%;
         }
         .video-overlay {
         position: absolute;
         width: 100%;
         height: 100%;
         /*background: #780F13;*/
         background: linear-gradient(90deg,rgba(141, 24, 219, 1) 0%, rgba(112, 17, 85, 1) 45%, rgba(120, 15, 19, 1) 74%, rgba(120, 15, 19, 0.54) 100%);
         box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         opacity: 1;
         transition: opacity 0.5s ease;
         }
         .video-overlay::before {
         content: "YouTube";
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: calc(80px + (184 - 80) * ((100vw - 320px) / (2560 - 320)));
         font-weight: bold;
         color: rgba(255, 255, 255, 0.5);
         z-index: 0;
         pointer-events: none;
         }
         .video-overlay.fade-out {
         opacity: 0;
         }
         .play-button-2 {
         width: 80px;
         height: 80px;
         background: red;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 1;
         }
         .play-button-2::before {
         content: "";
         display: block;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 12px 0 12px 20px;
         border-color: transparent transparent transparent white;
         margin-left: 5px;
         }
         .video-iframe2 {
         width: 100%;
         height: 100%;
         border: 0;
         }
    
         /* Video 2
         ============================= 
         =============================
         =============================
         */

         .video-section {
         width: 100%;
         max-width: 800px;
         margin: 0 auto;
         position: relative;
         }
         /* Um das 16:9 Seitenverhältnis zu gewährleisten */
         .video-section::before {
         content: "";
         display: block;
         padding-top: 56.25%;
         }
         /* Inhalt-Wrapper für das Video oder den Platzhalter */
         .video-wrapper {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         }
         /* Platzhalterbild: füllt den Container und klickbar */
         .video-placeholder {
         width: 100%;
         height: 100%;
         background: no-repeat center center;
         background-size: cover;
         cursor: pointer;
         }
         /* Iframe soll den ganzen Container füllen */
         .video-iframe-3 {
         width: 100%;
         height: 100%;
         border: 0;
         }
		 
         /* Video 3
         ============================= 
         =============================
         =============================
         */
		 
         .video-sec {
         max-width: 800px;
         margin: 0 auto;
         }
         .video-cont {
         position: relative;
         width: 100%;
         padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
         overflow: hidden;
         border-radius: 8px;
         }
         .thumbnail, .ytvideo-iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         }
         .thumbnail {
         cursor: pointer;
         object-fit: cover;
         display: block;
         }
         .ytvideo-iframe {
         display: none;
         border: none;
         }
         .play-button {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 70px;
         height: 70px;
         background: rgba(255, 0, 0, 0.8);
         border-radius: 50%;
         cursor: pointer;
         z-index: 10;
         }
         .play-button::after {
         content: "▶";
         color: white;
         font-size: 24px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-40%, -50%);
         }
         .thumbnail:hover {
         opacity: 0.9;
         transition: opacity 0.3s;
         }
      </style>
   </head>
   <body>
      <section>
    
	<div style="margin-bottom: 50px;"></div>
   
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 1      ║ -->
         <!-- ╚══════════════╝ -->
         <div class="youtube-body">
            <div class="youtube-container">
               <div class="video-content" id="videoContent">
                  <div class="video-overlay" id="videoOverlay">
                     <div class="play-button-2"></div>
                  </div>
               </div>
            </div>
         </div>
         <script>
            document.getElementById('videoOverlay').addEventListener('click', function() {
              var overlay = this;
              overlay.classList.add('fade-out');
              setTimeout(function() {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('class', 'video-iframe2');
                iframe.setAttribute('src', 'https://www.youtube.com/embed/gR-yNIGICzM?autoplay=1');
              //  iframe.setAttribute('allow', 'autoplay; encrypted-media');
                iframe.setAttribute('allowfullscreen', '');
                var videoContent = document.getElementById('videoContent');
                videoContent.innerHTML = "";
                videoContent.appendChild(iframe);
              }, 500);
            });
         </script>
     
 	 <div style="margin-bottom: 50px;"></div>
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 2      ║ -->
         <!-- ╚══════════════╝ -->
         <div class="video-section">
            <div class="video-wrapper" id="videoContent-2">
               <!--  Vorschaubild festlegen -->
               <div class="video-placeholder" id="videoPlaceholder" style="background-image: url('youtube.jpg');"></div>
            </div>
         </div>
         <script>
            document.getElementById('videoPlaceholder').addEventListener('click', function() {
              // Erstellt das iframe-Element und setzt die entsprechenden Attribute
              var iframe = document.createElement('iframe');
              iframe.setAttribute('class', 'video-iframe-3');
              iframe.setAttribute('src', 'https://www.youtube.com/embed/XX2gZTGwZWc?autoplay=1');
            //  iframe.setAttribute('allow', 'autoplay; encrypted-media');
              iframe.setAttribute('allowfullscreen', '');
            
            
              var videoContent = document.getElementById('videoContent-2');
              videoContent.innerHTML = "";
              videoContent.appendChild(iframe);
            });
         </script>
        
		<div style="margin-bottom: 50px;"></div>
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 3      ║ -->
         <!-- ╚══════════════╝ -->
         <div style="height: 50px;"></div>
         <div class="video-sec">
            <div class="video-cont">
               <img src="https://img.youtube.com/vi/OjEg0IBR_ak/maxresdefault.jpg" 
                  alt="Video starten" 
                  class="thumbnail" 
                  id="videoThumbnail"
                  loading="lazy">
               <div class="play-button" id="playButton"></div>
               <iframe class="ytvideo-iframe" 
                  id="videoPlayer" 
                  src="https://www.youtube-nocookie.com/embed/OjEg0IBR_ak?enablejsapi=1" 
                  allowfullscreen></iframe>
            </div>
         </div>
         <script>
            document.getElementById('videoThumbnail').addEventListener('click', () => {
                const player = document.getElementById('videoPlayer');
                player.style.display = 'block';
                player.src += "&autoplay=1";
                document.getElementById('videoThumbnail').style.display = 'none';
                document.getElementById('playButton').style.display = 'none';
            });
            
            document.getElementById('playButton').addEventListener('click', () => {
                document.getElementById('videoThumbnail').click();
            });
         </script>
      </section>
   </body>
</html>

3.
Hier finden Sie den vollständigen Code für die beiden oben präsentierten Videos sowie für ein weiteres Video, sofern die Videos nach einem Klick auf das Overlay AUTOMATISCH abgespielt werden sollen:


<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Video mit Click-to-Play</title>
      <style>
         body {
         background: #494352;
         width: 100%;
         }
		 
         /* Video 1
         ============================= 
         =============================
         =============================
         */
		 
         .youtube-body {
         display: flex;
         justify-content: center;
         margin: 0;
         }
         /* Container mit flexibler Breite und Seitenverhältnis */
         .youtube-container {
         width: 100%;
         max-width: 800px;
         position: relative;
         aspect-ratio: 16 / 9; /* 16:9 Seitenverhältnis */
         background: #000; /* Hintergrundfarbe falls Video nicht lädt */
         }
         .video-content {
         position: absolute;
         width: 100%;
         height: 100%;
         }
         .video-overlay {
         position: absolute;
         width: 100%;
         height: 100%;
         /*background: #780F13;*/
         background: linear-gradient(90deg,rgba(141, 24, 219, 1) 0%, rgba(112, 17, 85, 1) 45%, rgba(120, 15, 19, 1) 74%, rgba(120, 15, 19, 0.54) 100%);
         box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         opacity: 1;
         transition: opacity 0.5s ease;
         }
         .video-overlay::before {
         content: "YouTube";
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: calc(80px + (184 - 80) * ((100vw - 320px) / (2560 - 320)));
         font-weight: bold;
         color: rgba(255, 255, 255, 0.5);
         z-index: 0;
         pointer-events: none;
         }
         .video-overlay.fade-out {
         opacity: 0;
         }
         .play-button-2 {
         width: 80px;
         height: 80px;
         background: red;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 1;
         }
         .play-button-2::before {
         content: "";
         display: block;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 12px 0 12px 20px;
         border-color: transparent transparent transparent white;
         margin-left: 5px;
         }
         .video-iframe2 {
         width: 100%;
         height: 100%;
         border: 0;
         }
		 
         /* Video 2
         ============================= 
         =============================
         =============================
         */
		 
         .video-section {
         width: 100%;
         max-width: 800px;
         margin: 0 auto;
         position: relative;
         }
         /* Um das 16:9 Seitenverhältnis zu gewährleisten */
         .video-section::before {
         content: "";
         display: block;
         padding-top: 56.25%;
         }
         /* Inhalt-Wrapper für das Video oder den Platzhalter */
         .video-wrapper {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         }
         /* Platzhalterbild: füllt den Container und klickbar */
         .video-placeholder {
         width: 100%;
         height: 100%;
         background: no-repeat center center;
         background-size: cover;
         cursor: pointer;
         }
         /* Iframe soll den ganzen Container füllen */
         .video-iframe-3 {
         width: 100%;
         height: 100%;
         border: 0;
         }
		 
         /* Video 3
         ============================= 
         =============================
         =============================
         */
		 
         .video-sec {
         max-width: 800px;
         margin: 0 auto;
         }
         .video-cont {
         position: relative;
         width: 100%;
         padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
         overflow: hidden;
         border-radius: 8px;
         }
         .thumbnail, .ytvideo-iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         }
         .thumbnail {
         cursor: pointer;
         object-fit: cover;
         display: block;
         }
         .ytvideo-iframe {
         display: none;
         border: none;
         }
         .play-button {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 70px;
         height: 70px;
         background: rgba(255, 0, 0, 0.8);
         border-radius: 50%;
         cursor: pointer;
         z-index: 10;
         }
         .play-button::after {
         content: "▶";
         color: white;
         font-size: 24px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-40%, -50%);
         }
         .thumbnail:hover {
         opacity: 0.9;
         transition: opacity 0.3s;
         }
      </style>
   </head>
   <body>
      <section>
         <div style="height: 50px;"></div>
         <div style="margin-bottom: 50px;"></div>
		 
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 1      ║ -->
         <!-- ╚══════════════╝ -->
		 
         <div class="youtube-body">
            <div class="youtube-container">
               <div class="video-content" id="videoContent">
                  <div class="video-overlay" id="videoOverlay">
                     <div class="play-button-2"></div>
                  </div>
               </div>
            </div>
         </div>
         <script>
            document.getElementById('videoOverlay').addEventListener('click', function() {
              var overlay = this;
              overlay.classList.add('fade-out');
              setTimeout(function() {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('class', 'video-iframe2');
                iframe.setAttribute('src', 'https://www.youtube.com/embed/gR-yNIGICzM?autoplay=1');
                iframe.setAttribute('allow', 'autoplay; encrypted-media');
                iframe.setAttribute('allowfullscreen', '');
                var videoContent = document.getElementById('videoContent');
                videoContent.innerHTML = "";
                videoContent.appendChild(iframe);
              }, 500);
            });
         </script>
         <div style="margin-bottom: 50px;"></div>
		 
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 2      ║ -->
         <!-- ╚══════════════╝ -->
		 
         <div class="video-section">
            <div class="video-wrapper" id="videoContent-2">
               <!--  Vorschaubild festlegen -->
               <div class="video-placeholder" id="videoPlaceholder" style="background-image: url('youtube.jpg');"></div>
            </div>
         </div>
         <script>
            document.getElementById('videoPlaceholder').addEventListener('click', function() {
              // Erstellt das iframe-Element und setzt die entsprechenden Attribute
              var iframe = document.createElement('iframe');
              iframe.setAttribute('class', 'video-iframe-3');
              iframe.setAttribute('src', 'https://www.youtube.com/embed/XX2gZTGwZWc?autoplay=1');
              iframe.setAttribute('allow', 'autoplay; encrypted-media');
              iframe.setAttribute('allowfullscreen', '');
            
            
              var videoContent = document.getElementById('videoContent-2');
              videoContent.innerHTML = "";
              videoContent.appendChild(iframe);
            });
         </script>
         <div style="margin-bottom: 50px;"></div>
		 
         <!-- ╔══════════════╗ -->
         <!-- ║ Video 3      ║ -->
         <!-- ╚══════════════╝ -->
		 
         <div class="video-sec">
            <div class="video-cont">
               <img src="https://img.youtube.com/vi/OjEg0IBR_ak/maxresdefault.jpg" 
                  alt="Video starten" 
                  class="thumbnail" 
                  id="videoThumbnail"
                  loading="lazy">
               <div class="play-button" id="playButton"></div>
               <!-- WICHTIG: "mute=1" für zuverlässiges Autoplay 
                  src="https://www.youtube-nocookie.com/embed/cNEl7RDPw1c?enablejsapi=1&mute=1" 
                  -->
               <iframe class="ytvideo-iframe" 
                  id="videoPlayer" 
                  src="https://www.youtube-nocookie.com/embed/OjEg0IBR_ak?enablejsapi=1" 
                  allow="autoplay" 
                  allowfullscreen></iframe>
            </div>
         </div>
         <script>
            document.getElementById('videoThumbnail').addEventListener('click', () => {
                const player = document.getElementById('videoPlayer');
                player.style.display = 'block';
                
                // Autoplay mit Ton (falls vom Browser erlaubt)
                player.src += "&autoplay=1";
                
                // Alternativ: Nutze die YouTube-API für mehr Kontrolle
                // player.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                
                document.getElementById('videoThumbnail').style.display = 'none';
                document.getElementById('playButton').style.display = 'none';
            });
            
            document.getElementById('playButton').addEventListener('click', () => {
                document.getElementById('videoThumbnail').click();
            });
         </script>
         <div style="height: 50px;"></div>
      </section>
   </body>
</html>