flex-direction: column;
justify-content: center;
+ $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+
#videojs-wrapper {
width: 100%;
+ height: $height;
}
::ng-deep .video-js {
- $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
-
height: $height;
width: 100%;
max-width: initial;
}
#video-wrapper {
+ $video-height: 66vh;
+
background-color: #000;
display: flex;
justify-content: center;
display: flex;
justify-content: center;
flex-grow: 1;
+ height: $video-height;
}
.remote-server-down {
::ng-deep .video-js {
width: 100%;
max-width: getPlayerWidth(66vh);
- height: 66vh;
+ height: $video-height;
// VideoJS create an inner video player
video {
}
@media screen and (max-width: 600px) {
+ #videojs-wrapper {
+ height: getPlayerHeight(100vw) !important;
+ }
+
.remote-server-down,
::ng-deep .video-js {
width: 100vw;
- height: getPlayerHeight(100vw)
+ height: getPlayerHeight(100vw) !important;
}
}
}
font-weight: 500;
font-size: 90%;
}
+
+ a.single-link {
+ margin-top: 7px;
+ }
}
}
filter: brightness(120%);
.count {
- margin-right: 5px;
+ margin: 0 5px;
}
}
.video-info-description-html {
@include peertube-word-wrap;
- /deep/ a {
+ ::ng-deep a {
text-decoration: none;
}
}
.privacy-concerns {
width: 100%;
-
- strong {
- display: none;
- }
}
}
}
}
}
+
+
+// Special case for iOS, that takes into account the width for fullscreens
+#video-wrapper ::ng-deep .video-js.vjs-fullscreen {
+ max-width: unset;
+}