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

26
scss/index.scss
View File

@ -9,6 +9,7 @@ $cloud_width: 200px;
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden;
@include body-font; @include body-font;
.clouds { .clouds {
@ -40,7 +41,18 @@ body {
.wrapper { .wrapper {
min-height: 70vh; min-height: 70vh;
align-items: flex-end; 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; align-items: center;
justify-content: space-around; justify-content: space-around;
flex-direction: column; flex-direction: column;
padding-top: 3em; padding-top: 2em;
height: 100%; height: 100%;
.content { .content {
display: flex; display: flex;
@ -114,6 +126,13 @@ h1 {
@media (max-width: 600px) { @media (max-width: 600px) {
body { body {
.top {
.wrapper {
.player {
width: 100%;
}
}
}
.bottom { .bottom {
.wrapper { .wrapper {
.content { .content {
@ -125,6 +144,9 @@ h1 {
} }
} }
} }
h1 {
font-size: 3em;
}
} }