Changes

Jump to navigation Jump to search
977 bytes added ,  18:32, 22 May 2023
no edit summary
Line 1: Line 1: −
<!DOCTYPE html>
   
<html>
 
<html>
 
   <head>
 
   <head>
     <title>YouTube Video Auto Play</title>
+
     <title>YouTube Video Click Play</title>
 +
    <style>
 +
      .video-container {
 +
        display: flex;
 +
        flex-wrap: wrap;
 +
        justify-content: center;
 +
        gap: 20px;
 +
      }
 +
 
 +
      .video-box {
 +
        position: relative;
 +
        width: 400px;
 +
        height: 240px;
 +
      }
 +
 
 +
      .play-button {
 +
        position: absolute;
 +
        top: 50%;
 +
        left: 50%;
 +
        transform: translate(-50%, -50%);
 +
        font-size: 40px;
 +
        color: white;
 +
        cursor: pointer;
 +
      }
 +
 
 +
      .video-iframe {
 +
        width: 100%;
 +
        height: 100%;
 +
      }
 +
    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
     <div id="video-container"></div>
+
     <div class="video-container">
 +
      <div class="video-box">
 +
        <div class="play-button" onclick="playVideo('efR1C6CvhmE')">▶</div>
 +
        <iframe class="video-iframe" src="https://www.youtube.com/embed/efR1C6CvhmE"></iframe>
 +
      </div>
 +
 
 +
      <div class="video-box">
 +
        <div class="play-button" onclick="playVideo('VIDEO_ID_2')">▶</div>
 +
        <iframe class="video-iframe" src="https://www.youtube.com/embed/VIDEO_ID_2"></iframe>
 +
      </div>
 +
 
 +
      <!-- Add more video boxes as needed -->
 +
    </div>
    
     <script>
 
     <script>
       function loadVideo() {
+
       function playVideo(videoId) {
        var container = document.getElementById('video-container');
  −
        var videoUrl = 'https://www.youtube.com/embed/efR1C6CvhmE?autoplay=1';
  −
 
   
         var iframe = document.createElement('iframe');
 
         var iframe = document.createElement('iframe');
         iframe.src = videoUrl;
+
         iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
 
         iframe.width = 400;
 
         iframe.width = 400;
 
         iframe.height = 240;
 
         iframe.height = 240;
 
         iframe.setAttribute('allow', 'autoplay');
 
         iframe.setAttribute('allow', 'autoplay');
         container.appendChild(iframe);
+
          
 +
        var videoBox = event.target.parentNode;
 +
        videoBox.innerHTML = '';
 +
        videoBox.appendChild(iframe);
 
       }
 
       }
  −
      window.onload = loadVideo;
   
     </script>
 
     </script>
 
   </body>
 
   </body>
 
</html>
 
</html>
581

edits

Navigation menu