Как создать прокручиваемый div, который соответствует высоте моего iframe, используя Material-UI? - PullRequest
Новая
       4

Как создать прокручиваемый div, который соответствует высоте моего iframe, используя Material-UI?

0 голосов
/ 14 февраля 2020

Я создаю адаптивный видеоплеер с плейлистом рядом с ним. Это для рабочего стола и выше размеров экрана. Плейлист может содержать сотни элементов.

Моя попытка доступна по адресу https://codesandbox.io/s/responsive-video-player-playlist-q3601

Проблема, с которой я сталкиваюсь, заключается в том, что когда Часть списка воспроизведения не прокручивается, и ее высота не совпадает с ее братом (видео-проигрывателем).

Что я ищу
- высота проигрывателя и списка воспроизведения должна быть равным высоте видео плеера.
- Большое количество элементов в списке воспроизведения должно быть прокручиваемым.

Что я пробовал?
Демонстрация доступна на https://codesandbox.io/s/responsive-video-player-playlist-q3601

Любая помощь очень ценится!

1 Ответ

1 голос
/ 14 февраля 2020

вам нужно использовать один и тот же трюк для списка воспроизведения и игрока, точки останова и позиции.

добавление класса может помочь добавить еще несколько CSS правил:

https://codesandbox.io/s/responsive-video-player-playlist-i1msg

CSS обновлена ​​часть: 

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "brown",
    display: "flex"
  },
  playerContainer: {
    position: "relative",
    paddingTop: "37.25%",
    height: 0,
    overflow: "hidden",
    maxWidth: "100%",
    backgroundColor: "#000000",
    [theme.breakpoints.down("sm")]: {
      paddingTop: "56.25%"
    }
  },
  iframe: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "6px solid yellow"
  },
  playlist: {
    position: "relative",
    [theme.breakpoints.down("sm")]: {
      position: "staic"
    }
  },
  playlistContainer: {
    backgroundColor: "lightgrey",
    position: "absolute",
    top: "0",
    bottom: "0",
    right: "0",
    left: "0",
    overflow: "auto",
    [theme.breakpoints.down("sm")]: {
      position: "relative"
    }
  }
}));

и структура: 

<Grid container className={classes.root}>
      <Grid item xs={12} md={8} className={classes.playerContainer}>
        <iframe
          title="video"
          src="https://player.vimeo.com/video/66140585"
          frameborder="0"
          className={classes.iframe}
        />
      </Grid>
      <Grid item xs={12} md={4} className={classes.playlist}>
        <Grid container className={classes.playlistContainer}>
          <Grid item xs={12}>
            {lines.map((line, key) => (
              <div key={key}>{line}</div>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </Grid>
...