locked video aspect ratio to 16:9

This commit is contained in:
bill bittner 2017-10-20 10:54:26 -07:00
parent c616ece1f9
commit 9a3018016f
4 changed files with 19 additions and 6 deletions

View file

@ -500,6 +500,7 @@ table {
} }
#video-player { #video-player {
background-color: black;
cursor: pointer; cursor: pointer;
} }

View file

@ -6,11 +6,21 @@
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{else}} {{else}}
<video id="video-player" class="video-show" controls poster="{{fileInfo.thumbnail}}">
<video id="video-player" class="video-show video" controls poster="{{fileInfo.thumbnail}}">
<source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"> <source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{!--fallback--}} {{!--fallback--}}
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
window.addEventListener("resize", resizeVideoPlayer);
function resizeVideoPlayer() {
const div = document.getElementById('video-player');
const width = div.offsetWidth;
div.height = (width * 9 / 16);
}
</script>
{{/ifConditional}} {{/ifConditional}}
{{else}} {{else}}
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">

View file

@ -1,6 +1,8 @@
{{#if fileInfo.description}}
<div class="row row--wide row--short"> <div class="row row--wide row--short">
<p class="label">{{fileInfo.description}}</p> <p class="label">{{fileInfo.description}}</p>
</div> </div>
{{/if}}
<div class="row row--wide"> <div class="row row--wide">
<div id="show-short-link"> <div id="show-short-link">