locked video aspect ratio to 16:9
This commit is contained in:
parent
c616ece1f9
commit
9a3018016f
4 changed files with 19 additions and 6 deletions
|
@ -500,6 +500,7 @@ table {
|
|||
}
|
||||
|
||||
#video-player {
|
||||
background-color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
@ -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}}">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}}
|
||||
|
|
Loading…
Reference in a new issue