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 {
background-color: black;
cursor: pointer;
}

View file

@ -6,11 +6,21 @@
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<video id="video-player" class="video-show" controls poster="{{fileInfo.thumbnail}}">
<source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
<video id="video-player" class="video-show video" controls poster="{{fileInfo.thumbnail}}">
<source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</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}}
{{else}}
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">

View file

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

View file

@ -3,7 +3,7 @@
<!-- title -->
<span class="title-show">{{fileInfo.title}}</span>
</div>
<div class="column column--5 column--med-10 align-content-top" >
<div class="column column--5 column--med-10 align-content-top">
<!-- asset -->
<div class="row">
{{> asset}}