2839a5e236
* Custom thumbnail poster component * add opacity transition to thumbnail img * fix some videoonly styles * move video styles to video.css * make component out of image layers; put inline styles into css * cleanup * update videoonly ; don't render poster if video player, remove dom modification in player * revert interval Co-authored-by: Ginger Wong <omqmail@gmail.com>
54 lines
1016 B
CSS
54 lines
1016 B
CSS
video.video-js {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
min-height: 100%
|
|
}
|
|
|
|
/* show big play button when paused */
|
|
.vjs-has-started.vjs-paused .vjs-big-play-button{
|
|
display: block;
|
|
}
|
|
|
|
.vjs-airplay .vjs-icon-placeholder::before {
|
|
content: url("../img/airplay.png");
|
|
}
|
|
|
|
.vjs-big-play-button {
|
|
z-index: 100;
|
|
}
|
|
|
|
/*
|
|
videojs hack!!
|
|
for some reason, there are cases where a <video class="vjs-tech"> element gets embedded twice.
|
|
we only want the first one. the second obstructs the layout.
|
|
Some context here:
|
|
https://github.com/owncast/owncast/issues/165
|
|
*/
|
|
video.vjs-tech:not([src]) {
|
|
display: none;
|
|
}
|
|
|
|
|
|
#oc-custom-poster {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animation time for crossfading between poster thumbs */
|
|
.custom-thumbnail-image {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transition: opacity 2s;
|
|
}
|
|
|