html
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
<!-- Solotube HTML -->
<!DOCTYPE html>
<html>
<head>
<title>SoloTube</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div id="cntpre" class = "cntpreload">
<div class="loader">
</div>
</div>
<div class="topnav">
<div id="nav" class="navbar">
<div class="logo">
<img
src="https://cdn.pixabay.com/photo/2022/03/16/00/42/play-7071351_1280.png" alt = "youtube"
/>
</div>
<div class="icon avatar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTe0fHyMlckkgcn-A216gegzcerTbh9Zt2nrg&usqp=CAU" alt = "avatar"
/>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
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
/* Solotube CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.player {
float:center;
position: absolute;
bottom: 8px;
right: 35px;
background-color: red;
color: white;
width:150px;
height:35px;
}
input {
float:center;
position: absolute;
bottom: 5px;
right: 185px;
height:35px;
background-color: white;
color: black;
}
body {
margin: 0;
padding: 0;
background: #282828;
padding-top: 100px;
font-family: 'Roboto', sans-serif;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Solotube JS
function find(){
var id = document.getElementById("id");
var iframe = document.getElementById("iframe")
if((id.value.length)==11){
iframe.src = "https://www.youtube.com/embed/"+id.value
}else if((id.value.length)==34){
iframe.src = "https://www.youtube.com/embed/videoseries?list="+id.value
}else {alert ("Invalid ID!")}
}
window.onload = function (){
document.getElementById("cntpre").style.display = "none";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run