From 19c32bf993d7909c91c2b511c4e32610148b1109 Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Tue, 12 Mar 2019 10:01:36 -0500 Subject: [PATCH 1/2] Calculate player height based on viewport --- assets/css/default.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index cec255dd..33751d41 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -316,12 +316,12 @@ img.thumbnail { } .player-dimensions.vjs-fluid { - padding-top: 46.86%; + padding-top: 82vh; } #player-container { position: relative; - padding-bottom: 46.86%; + padding-bottom: 82vh; margin-left: 1em; margin-right: 1em; height: 0; From cf3f0fcc3986198ea89d4ef4ca11f51009bcb22e Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Tue, 12 Mar 2019 10:12:47 -0500 Subject: [PATCH 2/2] Add max-aspect-ratio to player --- assets/css/default.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/assets/css/default.css b/assets/css/default.css index 33751d41..464efd4b 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -181,6 +181,16 @@ img.thumbnail { margin-right: 1em; } +@media only screen and (max-aspect-ratio: 16/9) { + .player-dimensions.vjs-fluid { + padding-top: 46.86% !important; + } + + #player-container { + padding-bottom: 46.86% !important; + } +} + @media screen and (max-width: 767px) { .navbar { flex-direction: column;