Difference between revisions of "GitHub"

From UConn PAN
Jump to navigation Jump to search
(Created page with "<!DOCTYPE html> <html> <head> <title>YouTube Video Auto Play</title> </head> <body> <div id="video-container"></div> <script> function loadVideo() {...")
 
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>

Revision as of 18:32, 22 May 2023

YouTube Video Click Play

▶
▶

Retrieved from "https://zeus.phys.uconn.edu/wiki/index.php?title=GitHub&oldid=36379"