svg 视频播放器简洁页面效果-html代码-BFW代码库

svg 视频播放器简洁页面效果

代码语言：html

所属分类：多媒体

代码描述：svg 视频播放器简洁页面效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

<style>
:root {
	--accent: #00C6F2;
/* 	--accent: #d7577e; */
	
	--main: #ffffff;
}
body {
	width: 100%;
	height: 100%;
	background: #ff578e;
}
html {
	display: flex;
	justify-content: center;
	font-family: Comfortaa;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	font-size: 16px;
	color: var(--main);
}
.player-container {
	padding: 40px;
	max-width: 700px;
	margin: auto;
}
.player {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	background: #000000;
}
.player:fullscreen {
	padding-bottom: 100vh;
}
.player:-webkit-full-screen {
	padding-bottom: 100vh;
}
.player:-moz-full-screen {
	padding-bottom: 100vh;
}
.player:-ms-fullscreen  {
	padding-bottom: 100vh;
}
.player video {
	width: 100%;
	height: auto;
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.controls {
	padding: 0;
	position: absolute;
	bottom: -80px;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	background: linear-gradient(
		180deg,
		rgba(37, 37, 37,.........完整代码请登录后点击上方下载按钮下载查看