iframe { }
.over {
position: absolute;
height: 3em;
width: calc(100% - 13.5em);
bottom: 0;
left: 6.5em;
z-index: 999; }
.controls.pc {
position: absolute;
display: flex;
align-content: center;
flex-wrap: wrap;
height: 60px;
width: 100%;
bottom: 0;
left: 0;
z-index: 990;
background: rgba(0, 0, 0, 0.5);
}
.controls.sp {
display: none;
font-size: 18px;
position: absolute;
top: 0px; right: calc(var(--bs-gutter-x) * .5);
width: 24px;
height: 24px;
margin: 0;
padding: 0;
background: rgba(0,0,0,0.1);
border-radius: 0;
}
.controls .fas,
.controls .far {
font-size: 18px; color: #fff;
} .controls .volume,
.controls .setting,
.controls .full-screen,
.controls .cc {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.controls .btn-play {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.controls .second {
width: calc(12rem + 15px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.controls .second .slash {
padding: 0 0.5rem;
}
.controls .btn-play .fas,
.controls .btn-play .far {
font-size: 24px;
}
.controls .bar-progress {
display: flex;
align-items: center;
width: calc(100% - 120px - 70px - (12rem + 15px) - 20px);
margin-right: 10px;
}
.controls .bar-progress progress {
height: 24px; width: 100%;
}
.controls .setting {
flex-flow: column;
justify-content: center; align-items: center;
color: #fff;
}
.controls .setting ul {
position: absolute;
bottom: 30px; list-style-type: none;
padding-left: 0;
}
.controls .setting ul li {
padding: 5px 0.5rem;
background: rgba(0, 0, 0, 0.5);
text-align: right;
font-size: 12px;
}
.controls .setting ul li input {
list-style-type: none;
display: none;
}
.controls .setting ul li.quality {
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-weight: 400;
}
.controls .setting ul li.quality.active {
background: rgba(255, 255, 255, 0.7);
color: #333;
font-weight: 600;
}
.announce {
position: absolute;
z-index: 999;
top: 0; margin: auto;
width: 100%; height: auto; color: #fff;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 1.1em;
line-height: 1.6;
padding: 1.4rem;
}
.announce-playmark {
float: left;
padding: 0 1rem; }
.announce-playmark:hover {
cursor: pointer;
}
.announce-text {
float: left; text-align: left;
}
.announce p {
margin-block-start: 0;
margin-block-end: 0;
margin: 0;
}
.announce .fa,
.announce .fas,
.announce .far {
font-size: 3.2rem;
}
iframe:fullscreen {
pointer-events: none !important;
}
@media (max-width: 780px) {
.announce {
font-size: 0.8rem;
}
.announce .fa,
.announce .fas,
.announce .far {
font-size: 2.4rem;
}
}
@media (max-width: 480px) { .controls.pc {
display: none !important;
}
.controls .volume,
.controls .setting,
.controls .full-screen {
width: 70px;
}
.controls .fas,
.controls .far {
font-size: 18px;
}
.announce {
font-size: 0.9em;
bottom: unset; margin: 0 auto;
height: auto;
text-align: left;
padding: 15px;
}
.announce-text {
float: left;
padding-left: 15px;
text-align: left;
width: calc(100% - 75px);
}
.announce p,
.announce .fa,
.announce .fas,
.announce .far {
display: inline;
}
.announce .fa,
.announce .fas,
.announce .far {
font-size: 30px;
}
.announce-playmark {
float: left;
padding-left: 10px;
font-size: 30px;
}
.announce-text {
width: 100%;
}
}
@media(min-width: 480px) {
.announce-playmark {
display: block !important;
}
}