diff --git a/app/embeds/components/Frame.js b/app/embeds/components/Frame.js index 1b0e3387a..26b579783 100644 --- a/app/embeds/components/Frame.js +++ b/app/embeds/components/Frame.js @@ -39,7 +39,7 @@ class Frame extends React.Component { forwardedRef, ...rest } = this.props; - const Component = border ? Iframe : 'iframe'; + const Component = border ? StyledIframe : 'iframe'; return ( @@ -52,6 +52,7 @@ class Frame extends React.Component { type="text/html" frameBorder="0" title="embed" + loading="lazy" allowFullScreen {...rest} /> @@ -68,7 +69,11 @@ const Rounded = styled.div` height: ${props => props.height}; `; -const Iframe = styled.iframe` +// This wrapper allows us to pass non-standard HTML attributes through to the DOM element +// https://www.styled-components.com/docs/basics#passed-props +const Iframe = props =>