Difference between revisions of "GitHub"
Jump to navigation
Jump to search
YouTube Video Click Play
(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: | ||
| − | |||
<html> | <html> | ||
<head> | <head> | ||
| − | <title>YouTube Video | + | <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 | + | <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 | + | function playVideo(videoId) { |
| − | |||
| − | |||
| − | |||
var iframe = document.createElement('iframe'); | var iframe = document.createElement('iframe'); | ||
| − | iframe.src = | + | 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'); | ||
| − | + | ||
| + | var videoBox = event.target.parentNode; | ||
| + | videoBox.innerHTML = ''; | ||
| + | videoBox.appendChild(iframe); | ||
} | } | ||
| − | |||
| − | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 18:32, 22 May 2023