Make MUI dialog content size follow the size of the content

Question

As titled,

I want to show up a Youtube video inside a dialog upon page load, in which it would automatically open up the dialog and play the Youtube video. So i have this component here for my landing page

// 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>
  )
}

Im using state hook and set the value to true on initialization. Problem is that, the dialog box chopped the Youtube video, showing a scroll bar due to overflow. Upon checking the CSS, i can see that the dialog has a set fixed width applied onto it, which is smaller than the video width.

I want the dialog content to follow the size of the contents put inside it, and i don't want it to trigger the overflow clause, showing scrollbar on any side of the dialog box. How can i achieve this?

Answer 1

You can change the width of Dialog by using maxWidth attributes. There are 5 different dialog width that you can choose from, xs, sm, md, lg, xl.

For example,

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

Let me know if this is helpful