diff --git a/src/components/Story/Body.js b/src/components/Story/Body.js
index 39088c6037..c6ec7ebeea 100644
--- a/src/components/Story/Body.js
+++ b/src/components/Story/Body.js
@@ -53,8 +53,8 @@ export function getHtml(body, jsonMetadata = {}, returnType = 'Object') {
const id = match[1];
const type = match[2];
const link = match[3];
- const embed = embedjs.get(link, { width: '100%', height: 400, autoplay: true });
- sections.push();
+ const embed = embedjs.get(link, { width: '100%', height: 400, autoplay: false });
+ sections.push();
section = section.substring(`${id} ${type} ${link} ~~~`.length);
}
if (section !== '') {
@@ -67,11 +67,7 @@ export function getHtml(body, jsonMetadata = {}, returnType = 'Object') {
const Body = (props) => {
const htmlSections = getHtml(props.body, props.jsonMetadata);
- return (
-
- {htmlSections}
-
- );
+ return {htmlSections}
;
};
Body.propTypes = {
diff --git a/src/components/Story/PostFeedEmbed.js b/src/components/Story/PostFeedEmbed.js
index 38798f930e..5ba0da1264 100644
--- a/src/components/Story/PostFeedEmbed.js
+++ b/src/components/Story/PostFeedEmbed.js
@@ -9,12 +9,12 @@ export default class PostFeedEmbed extends React.Component {
thumbnail: PropTypes.string,
embed: PropTypes.string,
}).isRequired,
+ inPost: PropTypes.bool,
};
- static renderWithIframe(embed) {
- // eslint-disable-next-line react/no-danger
- return ;
- }
+ static defaultProps = {
+ inPost: false,
+ };
constructor(props) {
super(props);
@@ -28,6 +28,11 @@ export default class PostFeedEmbed extends React.Component {
this.setState({ showIframe: true });
};
+ renderWithIframe = embed => (
+ // eslint-disable-next-line react/no-danger
+
+ );
+
renderThumbFirst(thumb) {
return (
@@ -40,15 +45,16 @@ export default class PostFeedEmbed extends React.Component {
}
render() {
- const { embed } = this.props;
+ const { embed, inPost } = this.props;
+ const shouldRenderThumb = inPost ? false : !this.state.showIframe;
if (
- (embed.provider_name === 'YouTube' || embed.provider_name === 'DTube')
- && !this.state.showIframe
+ (embed.provider_name === 'YouTube' || embed.provider_name === 'DTube') &&
+ shouldRenderThumb
) {
return this.renderThumbFirst(embed.thumbnail);
} else if (embed.embed) {
- return PostFeedEmbed.renderWithIframe(embed.embed);
+ return this.renderWithIframe(embed.embed);
}
return
;
}
diff --git a/src/components/Story/PostFeedEmbed.less b/src/components/Story/PostFeedEmbed.less
index 3f1bf9a6c4..a399131e1a 100644
--- a/src/components/Story/PostFeedEmbed.less
+++ b/src/components/Story/PostFeedEmbed.less
@@ -23,7 +23,7 @@
&__preview {
display: block;
- max-width: 100%;
+ width: 100%;
max-height: 400px;
margin: 0 auto;
}
diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap
index 38a241bb4a..141289f842 100644
--- a/src/stories/__snapshots__/stories.test.js.snap
+++ b/src/stories/__snapshots__/stories.test.js.snap
@@ -2171,23 +2171,12 @@ exports[`Storyshots Story Full story with embed 1`] = `
}
/>
-
-
-
-
-
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "
",
+ }
+ }
+ />