Height in theme ui embed

Question

I have this embed theme-ui component and it's height doesn't works. In the console appears ok, but it displays with 100%;

<Embed src={url} sx={{width: '800px', height: '400px'}}/>

The embed is inside a modal of 100vw for 100vh

Thanks

Answer 1

I've been testing with this component, and there is no problem when I define a specific size.

Be sure that you're putting in your code /** @jsx jsx */ and after that declare jsx, like this import { jsx } from "theme-ui";

And try to use the lastest version, in the example I'm using 0.3.1 for theme-ui

UPDATE

Digging deeper, I think it's necessary create your own component where you can define an iframe because Embed component doesn't allow you change some css properties directly.

Theme-ui allows you create an iframe using Box component setting the a prop like this:

<Box as="iframe" .../>

OwnEmbed.js

/** @jsx jsx */
import { jsx, Box } from "theme-ui";

const OwnEmbed = ({
  src,
  frameBorder = 0,
  allowFullScreen = true,
  width = "100%",
  height = 0, /** <-- It's necessary set height from outside*/
  iFrameWidth = 560,
  iFrameHeight = 315,
  allow,
  ...props
}) => {
  return (
    <Box
      {...props}
      __css={{
        width: width,
        height: height,
        position: "relative",
        overflow: "hidden"
      }}
    >
      <Box
        as="iframe"
        src={src}
        width={iFrameWidth}
        height={iFrameHeight}
        frameBorder={frameBorder}
        allowFullScreen={allowFullScreen}
        allow={allow}
        __css={{
          position: "absolute",
          width: "100%",
          height: "100%",
          top: 0,
          bottom: 0,
          left: 0,
          border: 0
        }}
      />
    </Box>
  );
};

export default OwnEmbed;

The implementation it's same as Embed component

Main.js

/** @jsx jsx */
import { jsx, Embed, Box, Flex } from "theme-ui";
import React from "react";
import OwnEmbed from "./OwnEmbed";

class Main extends React.Component {
  render() {
    return (
      <Box p={1} bg="red">
        <OwnEmbed
          src="https://www.youtube.com/embed/GNCd_ERZvZM"
          width="100px"
          height="100px"
        />
        <hr />
        <OwnEmbed
          src="https://www.youtube.com/embed/mQ055hHdxbE"
          width="200px"
          height="200px"
        />
        <hr />
        <OwnEmbed
          src="https://www.youtube.com/embed/7oVnHbHhxLo"
          width="400px"
          height="200px"
        />
      </Box>
    );
  }
}
export default Main;

If you highlight the element in the browser you'll see the correct size.

Take a look at this: Change size Embed from theme-ui