Reactjs 无法使iframe全屏显示

我在我的组件中使用

材质UI

卡

，通过

iframe

显示youtube视频。一切都很好，但我就是不能让视频全屏，它说

全屏不可用

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardMedia”导入CardMedia；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Typography”导入排版；
常量样式={
卡片：{
背景颜色：“粉色”，
宽度：680，
身高：500，
textAlign：“居中”，
},
媒体：{
宽度：480，高度：360，
marginLeft：“自动”，
marginRight：“自动”
}
};
常量ImgMediaCard=（道具）=>{
常量{classes}=props；
返回(
蜥蜴
蜥蜴是一种广泛分布的有鳞爬行动物，有6000多种
物种，分布于除南极洲以外的所有大陆
);
}
导出默认样式（样式）（ImgMediaCard）；

材质界面未在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);

因为iframeM是CardMedia组件的id，我正在手动添加src、allowfullscreen属性

还可以在本地计算机环境中运行此代码。我附上了测试代码的视频。

---

在较新的material ui版本中，这一点似乎有所改变。我能够添加属性

allowfullscreen=“allowfullscreen”

它在Chrome、Firefox和Edge中都能正常工作

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);

document.getElementById("iframeM").setAttribute("allowfullscreen",
"true")
document.getElementById("iframeM").setAttribute("src", 
"https://www.youtube.com/embed/Ke90Tje7VS0")