ynerant/ghostream
1
0
Fork 0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2024-12-22 16:12:19 +00:00
Code Issues Releases Wiki Activity

Make player flex

Browse Source
This commit is contained in:
Alexandre Iooss 2020-10-18 18:25:18 +02:00
parent e51885aedc
commit ac5fc7a33b
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
3 changed files with 8 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/static/css/player.css
View File

@ -1,18 +1,9 @@
/* Player */ /* Player */
.video-responsive { video {
position: relative; display: block;
padding-top: 56.25%; /* 16/9 */ flex-grow: 1;
}
.video-responsive video { /* Black borders around video */
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
/* Black borders when video is not 16/9 */
background-color: #000; background-color: #000;
} }
@ -22,6 +13,7 @@
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
color: rgb(187, 187, 187); color: rgb(187, 187, 187);
user-select: none; user-select: none;
text-align: right;
} }
.control-quality, .control-quality,

9
web/static/css/style.css
View File

@ -43,20 +43,15 @@ h1, h2, h3, h4 {
.container { .container {
height: 100%; height: 100%;
width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%;
} }
.col-video { .col-video {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
text-align: right; display: flex;
flex-direction: column;
/* Limit max width to limit video size */
margin: auto;
max-width: 1200px;
} }
.col-chat { .col-chat {

4
web/template/player.html
View File

@ -2,9 +2,7 @@
<div class="container"> <div class="container">
<div class="col-video"> <div class="col-video">
<!-- Video --> <!-- Video -->
<div class="video-responsive"> <video id="viewer" poster="{{.Cfg.PlayerPoster}}" muted controls autoplay></video>
<video id="viewer" poster="{{.Cfg.PlayerPoster}}" muted controls autoplay></video>
</div>
<!-- Links and settings under video --> <!-- Links and settings under video -->
<div class="controls"> <div class="controls">