CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 15:22:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update MediaShareEmbed.jsx

Browse Source
This commit is contained in:
Yiannis Christodoulou
2026-01-09 09:49:18 +02:00
parent 30dad5dc06
commit 86009dbf4c
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
View File

@@ -183,7 +183,10 @@ export function MediaShareEmbed(props) {
const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`; const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`;
if (responsive) { if (responsive) {
return `<iframe src="${finalUrl}" width="100%" height="100%" frameBorder="0" allowFullScreen></iframe>`; const arr = aspectRatio.split(':');
const ratio = `${arr[0]} / ${arr[1]}`;
const maxWidth = `calc(100vh * ${arr[0]} / ${arr[1]})`;
return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
} }
const width = 'percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue; const width = 'percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue;
@@ -295,7 +298,6 @@ export function MediaShareEmbed(props) {
)} )}
</div> </div>
{!responsive && (
<div className="options-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}> <div className="options-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<div style={{ fontSize: '12px', marginBottom: '4px', color: 'rgba(0,0,0,0.6)' }}>Aspect Ratio</div> <div style={{ fontSize: '12px', marginBottom: '4px', color: 'rgba(0,0,0,0.6)' }}>Aspect Ratio</div>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -318,7 +320,6 @@ export function MediaShareEmbed(props) {
</select> </select>
</div> </div>
</div> </div>
)}
</div> </div>
<br /> <br />