[Design] Integrate plyr.io

index.html

@@ -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>

scss/index.scss

@@ -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;
+	}
 }