anxiao_web/rtc/css/videoShareCode.css

html,body{
	width:100%;
	height:100%;
	background:#000;
	overflow: hidden;
}
#video{
	float:left;
	width:100%;
	height:720px;
	position: absolute;
	background-image:url("../walkBgVideo.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:100;
}
#agora_local,
.player{
	width:100%;
	height:100%;
	z-index: 999999999 ;

}
#video>p{
	width:360px;
	height:120px;
	color:#fff;
	font-size:32px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-180px;
	margin-top:-100px;	
}
#video>p:hover{
	cursor: pointer;
}
#video>p>span{
	display: block;
	width:100%;
	height:45px;
	line-height:45px;
}
#video>p>img{
	display:block;
	width:60px;
	height:60px;
	margin:8px 120px;
}
.videoNav{
	position:absolute;
	width:100%;
	height:40px;
	line-height:40px;
	bottom:0px;
	left:0;
	background:#000;
	z-index:9999999;
}
.videoNav>p{
	float:left;
	height:40px;
	line-height:40px;
	margin-right:10px;
}
.videoNav>p>img{
	height:24px;
	padding:3px 5px;
	border-radius: 3px;
	border:1px solid #ccc;
}
.videoNav>p>img:last-child{
	margin-right:10px;
	padding:2px;
}
.videoNav>p:last-child{
	margin-left:5px;
}
.videoNav>p>img:first-child{
	margin-left:5px;
}
.videoNav>p:last-child>img{
	border:0;
	padding:0;
	margin-top:-2px;
}
.videoNav>p:last-child>span{
	color:#fff;
}
.layui-slider{
	float:left;
	width:70px;
	margin-top:18px;
}
.layui-slider-bar{
	background-color:#1296DB !important;
}
.layui-slider-wrap-btn{
	vertical-align: baseline;
}
.canvasImg{
	display: none;
	position: absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000000;
	background: rgba(0, 0, 0, 0.44);
}
.canvasImgBox{
	position: absolute;
	background: #000;
	right:10px;
	bottom:90px;
	font-size: 14px;
}
canvas{
	width:100%;
	height:100%;
}
.canvasImgBox>p{
	height:40px;
	line-height:40px;
}
.canvasImgBox>p>a,
.canvasImgBox>p>button{
	display: inline-block;
	height:36px;
	line-height:36px;
    border:1px solid #ccc;
    color:#fff;
	border-radius: 2px;
	padding:0 16px;
	background-color: #000; 
}

.inTheVideo{
	width:100px;
	height:40px;
	z-index:99999999;
	right:10px;
	top:10px;
	position:absolute;
	line-height:40px;
	color:#000;
	font-size:20px;
	animation:mymove 6s infinite;
	display:none;
	background:#fff;
	padding:0px 10px;
	border-radius: 6px;
	
}
.inTheVideo>img{
	width:22px;
	height:22px;
	float:left;
	margin:9px 5px;
}
@keyframes mymove
{
	0%   {opacity:0;}
	25%  {opacity:0.5;}
	50%  {opacity:1;}
	75%  {opacity:0.5;}
	100%  {opacity:0;}
}
.videoRotate{
	position:absolute;
	z-index:9999999999999999999;
	width:200px;
	height:90px;
	right:0%;
	top:0%;
	margin-top:0px;
	margin-left:-70px;
	font-size:14px;
	border-radius:4px;
	color:#000;
	text-align: center;
}
.videoRotate>p{
	line-height:40px;
	height:40px;
	margin:10px 0;
}
.videoRotate>p>button{
	padding:5px 10px;
	margin:0  5px;
	border:0;
}
.videoRotate>p>button:hover{
	cursor: pointer;
}

.videoRotate>p:nth-child(2)>button:nth-child(2){
	width:40px;
	height:40px;
	border-radius:50%;
	
}
.videoRotate>p>.bgColor{
	color:#fff;
	background:#003c71;
}
.videoTitle{
	position:absolute;
	z-index:9999999999999999999;
	background:#ccc;
	width:300px;
	height:140px;
	left:50%;
	top:50%;
	margin-top:-70px;
	margin-left:-150px;
	font-size:14px;
	border-radius:4px;
	border:1px solid #fff;
	display:none;
}
.videoTitle>p{
	text-align:center;
}
.videoTitle>p:nth-child(1){
	border-radius:4px 4px 0 0;
	height:30px;
	line-height:30px;
	text-align: center;
	background:#ccc;
	font-size:16px;
	font-weight: bold;
	border-bottom:1px solid #fff;
}

.videoTitle>p:nth-child(2){
	height:50px;
	line-height:50px;
}

.videoTitle>p:nth-child(3)>button{
	height:32px;
	line-height:28px;
	padding:0 12px;
	color:#000;
	border:0;
	font-size:14px;
	margin-right:5px;
}
	

.videoInfo,
#qrcode{
	display:none;
	width:100%;
	z-index:99999999;
	
	bottom:0px;
	position:absolute;
	color:#fff;
	font-size:14px;
	background:#000;
	opacity:0.6;
}
.videoInfo{
	left:0px;
}
#qrcode{
	width:150px;
	height:150px;
	border:1px solid #ccc;
	right:0px !important;
	opacity:1;
}

.videoInfo>p{
	float:left;
	height:36px;
	line-height:36px;
	margin-left:10px;
}