import * as React from "react"
import styled, { StyledFunction } from "styled-components"
import { pMedia } from "../helpers"

interface EmbedProps {
  section: any
}

const Embed: React.SFC<EmbedProps> = props => {
  const { url, height, mobile_height } = props.section
  return <IFrame src={url} scrolling="no" frameBorder="0" height={height} mobileHeight={mobile_height} />
}

interface FrameProps extends React.HTMLProps<HTMLIFrameElement> {
  mobileHeight?: number
  height: number
}

const iframe: StyledFunction<FrameProps> = styled.iframe

const IFrame = iframe`
  width: 100%;
  height: ${props => props.height + "px"};
  ${props => pMedia.sm`
    height: ${props.mobileHeight}px;
  `}
`

export default Embed

import * as React from "react"
import styled, { StyledFunction } from "styled-components"

interface EmbedProps {
  section: any
}

const Embed: React.SFC<EmbedProps> = props => {
  const { url, height, mobile_height } = props.section
  return <IFrame src={url} scrolling="no" frameBorder="0" height={height} mobileHeight={mobile_height} />
}

interface FrameProps extends React.HTMLProps<HTMLIFrameElement> {
  mobileHeight?: number
  height: number
}

const iframe: StyledFunction<FrameProps & React.HTMLProps<HTMLIFrameElement>> = styled.iframe

const IFrame = iframe`
  width: 100%;
  height: ${props => props.height + "px"};
  @media (max-width: 600px) {
    height: ${props => props.mobileHeight + "px"};
  }
`

export default Embed

--- 
+++ 
@@ -1,5 +1,6 @@
 import * as React from "react"
 import styled, { StyledFunction } from "styled-components"
+import { pMedia } from "../helpers"
 
 interface EmbedProps {
   section: any
@@ -15,14 +16,14 @@
   height: number
 }
 
-const iframe: StyledFunction<FrameProps & React.HTMLProps<HTMLIFrameElement>> = styled.iframe
+const iframe: StyledFunction<FrameProps> = styled.iframe
 
 const IFrame = iframe`
   width: 100%;
   height: ${props => props.height + "px"};
-  @media (max-width: 600px) {
-    height: ${props => props.mobileHeight + "px"};
-  }
+  ${props => pMedia.sm`
+    height: ${props.mobileHeight}px;
+  `}
 `
 
 export default Embed
Fix query and remove duplicate prop
