581
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − <!DOCTYPE html> − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + + + + + + + + + + + + + − + − var container = document.getElementById('video-container'); − var videoUrl = 'https://www.youtube.com/embed/efR1C6CvhmE?autoplay=1'; − − + − container.appendChild(iframe); + + + + − − window.onload = loadVideo;
no edit summary
<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 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');
var videoBox = event.target.parentNode;
videoBox.innerHTML = '';
videoBox.appendChild(iframe);
}
}
</script>
</script>
</body>
</body>
</html>
</html>