-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (85 loc) · 4.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full-screen autoplay YouTube Homepage</title>
</head>
<body>
<!-- Your HTML content here. Replace the YouTube URL with yours -->
<div>
<a href="https://www.youtube.com/watch?v=nX3Cq3sKGKg">Watch this video</a>
</div>
<!-- JavaScript Code -->
<script>
<!-- HTML Template for full-screen YouTube homepage -->
<!-- The JavaScript code will automatically capture the first YouTube URL, and play it. -->
<!-- developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com -->
<!-- Live Preview available at https://tawhidurrahmandear.github.io/html-template-for-fullscreen-youtube-homepage -->
<!-- Released under GPL-2.0 license on Github at https://github.com/tawhidurrahmandear/html-template-for-fullscreen-youtube-homepage -->
// Function to find the first YouTube video
function findYouTubeVideo() {
const iframes = document.querySelectorAll('iframe');
for (const iframe of iframes) {
const src = iframe.src;
// Check if the iframe source is a YouTube URL
if (src.includes('youtube.com/embed/') || src.includes('youtu.be/')) {
return src; // Return the embed URL directly
}
}
// Check for YouTube links in anchor tags
const links = document.querySelectorAll('a');
for (const link of links) {
const href = link.href;
// Check if the link is a YouTube URL
if (href.includes('youtube.com/watch?v=')) {
// Convert to embed URL
const videoId = href.split('v=')[1].split('&')[0]; // Extract the video ID
return `https://www.youtube.com/embed/${videoId}`; // Return the embed URL
} else if (href.includes('youtu.be/')) {
// Handle short URLs
const videoId = href.split('youtu.be/')[1];
return `https://www.youtube.com/embed/${videoId}`; // Return the embed URL
}
}
return null; // No video found
}
// Function to play the video in fullscreen
function playVideoInFullscreen(videoSrc) {
const videoContainer = document.createElement('div');
videoContainer.style.position = 'fixed';
videoContainer.style.top = '0';
videoContainer.style.left = '0';
videoContainer.style.width = '100%';
videoContainer.style.height = '100%';
videoContainer.style.zIndex = '9999';
videoContainer.style.backgroundColor = 'black';
const iframe = document.createElement('iframe');
iframe.src = videoSrc + '?autoplay=1';
iframe.width = '100%';
iframe.height = '100%';
iframe.frameBorder = '0';
iframe.allowFullscreen = true;
videoContainer.appendChild(iframe);
document.body.appendChild(videoContainer);
// Request fullscreen
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else if (videoContainer.mozRequestFullScreen) { // Firefox
videoContainer.mozRequestFullScreen();
} else if (videoContainer.webkitRequestFullscreen) { // Chrome, Safari, and Opera
videoContainer.webkitRequestFullscreen();
} else if (videoContainer.msRequestFullscreen) { // IE/Edge
videoContainer.msRequestFullscreen();
}
}
// Find the YouTube video and play it in fullscreen
const videoSrc = findYouTubeVideo();
if (videoSrc) {
playVideoInFullscreen(videoSrc);
} else {
console.log('No YouTube video found on this page.');
}
</script>
</body>
</html>