не может сделать iframe полноэкранным - PullRequest
Новая
       8

не может сделать iframe полноэкранным

0 голосов
/ 11 октября 2018

Я использую Material UI Card в своем компоненте, чтобы показать видео YouTube через iframe.Все хорошо, но я просто не могу сделать видео полноэкранным, там написано 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);

1 Ответ

0 голосов
/ 11 октября 2018

Material 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, поскольку компонент CardMedia не добавляет атрибут allowfullscreen в тег iframe.Так что вам нужно сделать это вручную, также важно определить src, т.е. исходный URL для встраивания видео вручную, как я сделал так: 

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

Поскольку iframeM является id для компонента CardMedia, и я добавляю src вручную, атрибут allowfullscreen.

Также запустите этот код на вашей локальной машине.Я прилагаю видео проверенного кода. Видео проверенного кода

...