我在自己的组件中使用Material UI
Card
通过iframe
显示youtube视频。一切都很好,但是我无法使视频全屏显示,fullscreen is unavailable
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const styles = {
card: {
backgroundColor: "pink",
width: 680,
height: 500,
textAlign: "center",
},
media: {
width: 480, height: 360,
marginLeft: "auto",
marginRight: "auto"
}
};
const ImgMediaCard = (props) => {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
<CardMedia
component="iframe"
alt="Contemplative Reptile"
className={classes.media}
height="140"
image="https://www.youtube.com/embed/Ke90Tje7VS0"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
}
export default withStyles(styles)(ImgMediaCard);
答案 0 :(得分:0)
材料UI在CardMedia组件中不提供全屏功能。但是您可以使用替代方法来实现。请参见下面的代码。
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card"; import CardActionArea from
"@material-ui/core/CardActionArea"; import CardActions from
"@material-ui/core/CardActions"; import CardContent from
"@material-ui/core/CardContent"; import CardMedia from
"@material-ui/core/CardMedia"; import Button from
"@material-ui/core/Button"; import Typography from
"@material-ui/core/Typography";
const styles = { card: {
// textAlign: "center",
backgroundColor: "pink",
width: 680,
height: 500,
textAlign: "center" }, media: {
// ⚠️ object-fit is not supported by IE11.
//objectFit: "cover",
width: 480,
height: 360,
marginLeft: "auto",
marginRight: "auto" } }; class ImgMediaCard extends React.Component{
componentDidMount() {
try {
document.getElementById("iframeM").setAttribute("allowfullscreen",
"true")
document.getElementById("iframeM").setAttribute("src", "https://www.youtube.com/embed/Ke90Tje7VS0")
} catch (error) {
}
} render() { const { classes } = this.props;
return (
<Card className={classes.card}>
{}
<CardActionArea>
<CardMedia
id ="iframeM"
component="iframe"
alt="Contemplative Reptile"
className={classes.media}
height="140"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
</Card> ); } }
ImgMediaCard.propTypes = { classes: PropTypes.object.isRequired };
export default withStyles(styles)(ImgMediaCard);
请参见上面的代码,您可以为CardMedia组件指定ID,因为CardMedia组件不会在iframe代码中添加allowfullscreen属性。因此,您需要手动执行操作,这对定义src也很重要,即手动嵌入视频的源网址,就像我所做的那样:
document.getElementById("iframeM").setAttribute("allowfullscreen",
"true")
document.getElementById("iframeM").setAttribute("src",
"https://www.youtube.com/embed/Ke90Tje7VS0")
由于iframeM是CardMedia组件的ID,并且我要手动添加src,allowfullscreen属性。
还要在本地计算机环境上运行此代码。我正在附上经过测试的代码的视频。 Video of tested code
答案 1 :(得分:0)
这似乎在较新的 material-ui 版本中发生了变化。我能够添加属性
<块引用>allowfullscreen="allowfullscreen"
它适用于 Chrome、Firefox 和 Edge。
<CardMedia
component="iframe"
title="Your Title"
src="https://www.youtube.com/embed/[your_video"
allowfullscreen="allowfullscreen"
/>