Блог

Как озаглавлено,

Я хочу отображать видео Youtube внутри диалогового окна при загрузке страницы, в котором оно автоматически открывало бы диалоговое окно и воспроизводило видео Youtube. Итак, у меня есть этот компонент здесь для моей целевой страницы

 // Main Application container
import React, { useState } from 'react';
import { BrowserRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
// Application routes
import AppRoutes from '../routes';
// YouTube component
import YouTube from 'react-youtube';
// Components
import HeadNav from '../components/header/Nav';
import Footer from '../components/footer/Footer';
import Grid from '@material-ui/core/Grid';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';

const styles = theme => ({
  videoadjust: {
    padding: 0 // To clear any unnecessary padding
  }
});

const App = (props) => {
  const { classes } = props;
  const [openDialog, setOpenDialog] = useState(true);

  return (
    <div>
      <Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } >
        <DialogContent className={classes.videoadjust} >
          <YouTube videoId='OPf0YbXqDm0' />
        </DialogContent>
      </Dialog>
      /* Some other contents in here*/
    </div>
  )
}
  

Я использую перехват состояния и устанавливаю значение true при инициализации. Проблема в том, что диалоговое окно обрезало видео Youtube, показывая полосу прокрутки из-за переполнения. После проверки CSS я вижу, что к диалоговому окну применена установленная фиксированная ширина, которая меньше ширины видео.

Я хочу, чтобы содержимое диалогового окна соответствовало размеру содержимого, помещенного в него, и я не хочу, чтобы это вызывало предложение overflow, отображающее полосу прокрутки на любой стороне диалогового окна. Как я могу этого добиться?

Вы можете изменить ширину диалогового окна, используя атрибуты MaxWidth. Существует 5 вариантов ширины диалогового окна, которые вы можете выбрать: xs, sm, md, lg, xl.

Например,

 <Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } maxWidth={"md"}>
  

Дайте мне знать, если это полезно