Skip to content

Commit 862c05f

Browse files
so-aleso-ale
committed
Sohail's first commit
CSS added
1 parent ebd306a commit 862c05f

File tree

3 files changed

+202
-10
lines changed

3 files changed

+202
-10
lines changed

‎css/reset.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/*
2+
3+
CSS Reset
4+
Source: https://marksheet.io/css/reset.css
5+
Date: 19 June 2019
6+
7+
*/
8+
9+
10+
11+
12+
/* Let's default this puppy out
13+
-------------------------------------------------------------------------------*/
14+
15+
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
16+
margin: 0;
17+
padding: 0;
18+
border: 0;
19+
font-size: 100%;
20+
font-weight: normal;
21+
vertical-align: baseline;
22+
background: transparent;
23+
}
24+
25+
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
26+
27+
/* Handle box-sizing while better addressing child elements:
28+
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
29+
html {
30+
box-sizing: border-box;
31+
}
32+
33+
*,
34+
*:before,
35+
*:after {
36+
box-sizing: inherit;
37+
}
38+
39+
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
40+
41+
/* Responsive images and other embedded objects
42+
*/
43+
img,
44+
object,
45+
embed {max-width: 100%;}
46+
47+
/*
48+
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
49+
In fact, it *will* cause problems with Google Maps' controls at small size.
50+
If this is the case for you, try uncommenting the following:
51+
52+
#map img {
53+
max-width: none;
54+
}
55+
*/
56+
57+
/* force a vertical scrollbar to prevent a jumpy page */
58+
html {overflow-y: scroll;}
59+
60+
/* we use a lot of ULs that aren't bulleted.
61+
don't forget to restore the bullets within content. */
62+
ul {list-style: none;}
63+
64+
blockquote, q {quotes: none;}
65+
66+
blockquote:before,
67+
blockquote:after,
68+
q:before,
69+
q:after {content: ''; content: none;}
70+
71+
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
72+
73+
del {text-decoration: line-through;}
74+
75+
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
76+
77+
/* tables still need cellspacing="0" in the markup */
78+
table {border-collapse: collapse; border-spacing: 0;}
79+
th {font-weight: bold; vertical-align: bottom;}
80+
td {font-weight: normal; vertical-align: top;}
81+
82+
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
83+
84+
input, select {vertical-align: middle;}
85+
86+
pre {
87+
white-space: pre; /* CSS2 */
88+
white-space: pre-wrap; /* CSS 2.1 */
89+
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
90+
word-wrap: break-word; /* IE */
91+
}
92+
93+
input[type="radio"] {vertical-align: text-bottom;}
94+
input[type="checkbox"] {vertical-align: bottom;}
95+
.ie7 input[type="checkbox"] {vertical-align: baseline;}
96+
.ie6 input {vertical-align: text-bottom;}
97+
98+
select, input, textarea {font: 99% sans-serif;}
99+
100+
table {font-size: inherit; font: 100%;}
101+
102+
small {font-size: 85%;}
103+
104+
strong {font-weight: bold;}
105+
106+
td, td img {vertical-align: top;}
107+
108+
/* Make sure sup and sub don't mess with your line-heights https://gist.github.com/413930 */
109+
sub, sup {font-size: 75%; line-height: 0; position: relative;}
110+
sup {top: -0.5em;}
111+
sub {bottom: -0.25em;}
112+
113+
/* standardize any monospaced elements */
114+
pre, code, kbd, samp {font-family: monospace, sans-serif;}
115+
116+
/* hand cursor on clickable elements */
117+
.clickable,
118+
label,
119+
input[type=button],
120+
input[type=submit],
121+
input[type=file],
122+
button {cursor: pointer;}
123+
124+
/* Webkit browsers add a 2px margin outside the chrome of form elements */
125+
button, input, select, textarea {margin: 0;}
126+
127+
/* make buttons play nice in IE */
128+
button,
129+
input[type=button] {width: auto; overflow: visible;}
130+
131+
/* scale images in IE7 more attractively */
132+
.ie7 img {-ms-interpolation-mode: bicubic;}
133+
134+
/* prevent BG image flicker upon hover
135+
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
136+
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
137+
*/
138+
139+
/* let's clear some floats */
140+
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
141+
.clearfix:after { clear: both; }
142+
.clearfix { zoom: 1; }

‎css/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
3+
Stylesheet for video.js live video stream page
4+
Author: Sohail Lalani;
5+
License: none (public domain);
6+
7+
*/
8+
9+
body {
10+
background: #efefef;
11+
font-family: Helvetica, Verdana, sans-serif;
12+
font-size: 12px;
13+
color:#666;
14+
}
15+
16+
a {
17+
color:#000;
18+
}
19+
a:hover, a:active, a:focus {
20+
color:blue;
21+
}
22+
23+
h1 {
24+
font-size:21px;
25+
text-transform:capitalize;
26+
font-weight:bold;
27+
text-align:center;
28+
color:#555;
29+
}
30+
31+
#container {
32+
padding:50px 25px;
33+
}
34+
35+
#player {
36+
margin:20px auto;
37+
box-shadow: 0 8px 6px -6px #000000d9;
38+
}
39+
40+
p.description {
41+
margin:30px auto 0 auto;
42+
width:100%;
43+
max-width:640px;
44+
}

‎demo.html

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset=utf-8 />
5-
<title>videojs-contrib-hls embed</title>
5+
<title>Video.js Example Embed</title>
66

77
<!--
88
@@ -16,17 +16,23 @@
1616
1717
-->
1818

19-
<link href="/css/video-js.css" rel="stylesheet">
19+
<link href="css/reset.css" rel="stylesheet">
20+
<link href="css/video-js.css" rel="stylesheet">
21+
<link href="css/style.css" rel="stylesheet">
2022
</head>
2123
<body>
22-
<h1>Video.js Example Embed</h1>
23-
24-
<video-js id="player" class="vjs-default-skin" controls preload="auto" width="640" height="268">
25-
<source src="/hls/stream.m3u8" type="application/x-mpegURL">
26-
</video-js>
27-
28-
<script src="/js/video.js"></script>
29-
<script src="/js/videojs-http-streaming.js"></script>
24+
<div id="container">
25+
<h1>Video.js Example Embed</h1>
26+
27+
<video-js id="player" class="vjs-default-skin" controls preload="auto" width="640" height="268">
28+
<source src="/hls/stream.m3u8" type="application/x-mpegURL">
29+
</video-js>
30+
<p class="description">
31+
Video description goes here. <a href="#" title="Sample Link">Links</a> will look like this.
32+
</p>
33+
</div><!--container-->
34+
<script src="js/video.js"></script>
35+
<script src="js/videojs-http-streaming.js"></script>
3036

3137
<script>
3238
var player = videojs('#player', {

0 commit comments

Comments
 (0)