-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
80 lines (66 loc) · 2.15 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BigTube!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="controller" title="Toggle header(slide up/slide down)">Toggle</div>
<header>
<div class="logo">BigTube!</div>
<form action="." method="post">
<input class="" type="text" name="url" placeholder="Youtube link here ..." value="" autocomplete="off">
</form>
<div class="author">
Tweet thoughts <a href="https://twitter.com/rakibtg" target="_blank">@rakibtg</a>
- <a href="https://github.com/rakibtg/BigTube" target="_blank" title="Project Homepage">GitHub</a>
</div>
</header>
<div class="playerwrapper">
<iframe class="video-player" src="https://www.youtube.com/embed/"></iframe>
</div>
<script src="./jquery-3.1.1.min.js"></script>
<script>
let videoForm = $( 'form' ),
iframeObj = $( 'iframe' ),
headerObj = $( 'header' ),
inputObj = $( videoForm.find( 'input' ) );
inputObj.removeClass( "invalidurl" );
function yo () {
$( document ).ready( () => {
iframeObj.width( $( window ).width() - 0 );
iframeObj.height( $( window ).height() );
} );
}
yo();
$( window ).resize( ( ) => yo() );
$( '.controller' ).click( ( ev ) => {
ev.preventDefault();
headerObj.slideToggle();
});
videoForm.submit( ( e ) => {
e.preventDefault();
// Fetch the video id
let videoid = inputObj.val().match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
if( videoid != null ) {
iframeObj.attr( 'src', 'https://www.youtube.com/embed/'+videoid[1]+'?autoplay=1' );
iframeObj.parent().fadeIn();
inputObj.css({
borderBottomColor: '#666666'
});
headerObj.slideUp();
inputObj.removeClass( "invalidurl" );
} else {
inputObj.css({
borderBottomColor: '#f47373'
});
inputObj.addClass( "invalidurl" );
setTimeout( () => {
inputObj.removeClass( "invalidurl" );
}, 1000 );
}
} );
</script>
</body>
</html>