ceda_ei
/
redacted.life
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[Design] Integrate plyr.io

This commit is contained in:
Ceda EI 2020-01-21 03:15:35 +05:30
parent 751506dc14
commit fd3726f5a4
2 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redacted Life</title>
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/plyr/plyr.css" />
</head>
<body>
@ -15,6 +16,11 @@
<div class="wrapper">
<div class="content">
<h1>Redacted Life</h1>
<div class="player">
<video id="player">
<source src="assets/videos/sample.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
@ -30,6 +36,12 @@
</footer>
</div>
</div>
<script src="assets/plyr/plyr.js"></script>
<script>
const player = new Plyr("#player", {
iconUrl: "assets/plyr/plyr.svg",
});
</script>
</body>
</html>

26
scss/index.scss
View File

@ -9,6 +9,7 @@ $cloud_width: 200px;
body {
margin: 0;
padding: 0;
overflow-x: hidden;
@include body-font;
.clouds {
@ -40,7 +41,18 @@ body {
.wrapper {
min-height: 70vh;
align-items: flex-end;
padding-bottom: 3em;
padding-bottom: 2em;
.player {
margin: auto;
width: 80%;
.plyr {
border-radius: 3em;
border-color: #000;
border-width: 4px;
border-style: solid;
border-radius: 2em;
}
}
}
}
@ -52,7 +64,7 @@ body {
align-items: center;
justify-content: space-around;
flex-direction: column;
padding-top: 3em;
padding-top: 2em;
height: 100%;
.content {
display: flex;
@ -114,6 +126,13 @@ h1 {
@media (max-width: 600px) {
body {
.top {
.wrapper {
.player {
width: 100%;
}
}
}
.bottom {
.wrapper {
.content {
@ -125,6 +144,9 @@ h1 {
}
}
}
h1 {
font-size: 3em;
}
}