Looking to swap out the carousel slide image with a loom video.
Any ideas on how to replace the media img with an iframe in material-auto-rotating-carousel?
const AutoRotatingCarouselModal = ({ handleOpen, setHandleOpen, isMobile }) => {
return (
<div>
{/* <Button onClick={() => setHandleOpen({ open: true })}>Open carousel</Button> */}
<AutoRotatingCarousel
// label="Get started"
open={handleOpen.open}
onClose={() => setHandleOpen({ open: false })}
onStart={() => setHandleOpen({ open: false })}
autoplay={false}
mobile={isMobile}
style={{ position: "absolute" }}
>
<Slide
// media={
// <img src="http://www.icons101.com/icon_png/size_256/id_79394/youtube.png" />
// }
<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/f477ff57" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
mediaBackgroundStyle={{ backgroundColor: "#1565C0" }}
style={{ backgroundColor: "#42A5F5" }}
title="Monitor "
subtitle="Open."
/>
<Slide
media={
<img src="http://www.icons101.com/icon_png/size_256/id_80975/GoogleInbox.png" />
}
mediaBackgroundStyle={{ backgroundColor: blue[400] }}
style={{ backgroundColor: blue[600] }}
title="stations"
subtitle="Review "
/>
<Slide
media={
<img src="http://www.icons101.com/icon_png/size_256/id_76704/Google_Settings.png" />
}
mediaBackgroundStyle={{ backgroundColor: blue[600] }}
style={{ backgroundColor: blue[800] }}
title="Focus "
subtitle="The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe."
/>
</AutoRotatingCarousel>
</div>
);
};
export default function App() {
const classes = useStyles();
const [handleOpen, setHandleOpen] = useState({ open: false });
const handleClick = () => {
setHandleOpen({ open: true });
};
const matches = useMediaQuery("(max-width:600px)");
return (
<div className={classes.root}>
<ButtonBase
focusRipple
className={classes.image}
onClick={handleClick}
focusVisibleClassName={classes.focusVisible}
style={{
width: "100%",
}}
>
<span
className={classes.imageSrc}
style={{
backgroundImage: `url(${DS})`,
}}
/>
<span className={classes.imageBackdrop} />
<span className={classes.imageButton}>
<Typography
component="span"
variant="subtitle1"
color="inherit"
className={classes.imageTitle}
>
DESIGN
<span className={classes.imageMarked} />
</Typography>
</span>
</ButtonBase>
<AutoRotatingCarouselModal
isMobile={matches}
handleOpen={handleOpen}
setHandleOpen={setHandleOpen}
/>
</div>
);
}