Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

make video responsive to container

Browse Source
This commit is contained in:
sawka 2024-03-14 10:11:48 -07:00
parent e6c41788f5
commit 395a315068
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/plugins/media/media.less
View File

@ -4,4 +4,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: var(--termpad); padding-top: var(--termpad);
video {
object-fit: contain;
object-position: center;
height: 100%;
width: auto;
}
} }

6
src/plugins/media/media.tsx
View File

@ -46,10 +46,10 @@ class SimpleMediaRenderer extends React.Component<
let fullVideoUrl = GlobalModel.getBaseHostPort() + fileUrl; let fullVideoUrl = GlobalModel.getBaseHostPort() + fileUrl;
const opts = this.props.opts; const opts = this.props.opts;
const height = opts.idealSize.height - 10; const height = opts.idealSize.height - 10;
const width = opts.idealSize.width - 10; const width = opts.maxSize.width - 10;
return ( return (
<div className="media-renderer"> <div className="media-renderer" style={{ height: height, width: width }}>
<video width={width} height={height} controls> <video controls>
<source src={fullVideoUrl} /> <source src={fullVideoUrl} />
</video> </video>
</div> </div>