diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js
index 07cab0eba..db291f612 100644
--- a/app/soapbox/features/status/components/card.js
+++ b/app/soapbox/features/status/components/card.js
@@ -45,6 +45,7 @@ const addAutoPlay = html => {
}
iframe.src += 'autoplay=1&auto_play=1';
+ iframe.allow = 'autoplay';
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
@@ -71,7 +72,7 @@ export default class Card extends React.PureComponent {
};
state = {
- width: this.props.defaultWidth || 280,
+ width: this.props.defaultWidth || 467,
embedded: false,
};
@@ -121,12 +122,10 @@ export default class Card extends React.PureComponent {
renderVideo() {
const { card } = this.props;
- const cardWidth = card.get('width', card.getIn(['pleroma', 'opengraph', 'width']));
- const cardHeight = card.get('height', card.getIn(['pleroma', 'opengraph', 'height']));
const html = card.get('html', card.getIn(['pleroma', 'opengraph', 'html']));
const content = { __html: addAutoPlay(html) };
const { width } = this.state;
- const ratio = cardWidth / cardHeight;
+ const ratio = this.getRatio(card);
const height = width / ratio;
return (
@@ -139,6 +138,21 @@ export default class Card extends React.PureComponent {
);
}
+ getRatio = card => {
+ const width = card.get('width', card.getIn(['pleroma', 'opengraph', 'width']));
+ const height = card.get('height', card.getIn(['pleroma', 'opengraph', 'height']));
+ const ratio = width / height;
+
+ // Invalid dimensions, fall back to 16:9
+ if (typeof width !== 'number' || typeof height !== 'number') {
+ return 16 / 9;
+ }
+
+ // Constrain to a sane limit
+ // https://en.wikipedia.org/wiki/Aspect_ratio_(image)
+ return Math.min(Math.max(9 / 16, ratio), 4);
+ }
+
render() {
const { card, maxDescription, compact } = this.props;
const { width, embedded } = this.state;
@@ -154,7 +168,7 @@ export default class Card extends React.PureComponent {
const horizontal = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded;
const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? {card.get('title')} : {card.get('title')};
- const ratio = cardWidth / cardHeight;
+ const ratio = this.getRatio(card);
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = (
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 430c301a0..361ab1c2e 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -545,8 +545,8 @@ a.status-card {
.status-card-video,
.status-card-audio {
iframe {
- width: 100%;
- height: 100%;
+ width: 100% !important;
+ height: 100% !important;
}
}