React Player с CSS grid-template-area - PullRequest
Новая
       28

React Player с CSS grid-template-area

0 голосов
/ 09 января 2020

Я пытаюсь создать сетку, которая смешивает видео и изображения. Я использую сетку CSS с реагирующим плеером, чтобы архивировать это, и я сталкиваюсь со странной проблемой, что области видео всегда больше, чем изображение. Это проблема: enter image description here

Это мой код: 

 <SectionFeaturedProducts>
    <FeaturedProduct size="a" contentType="video" contentSource={Video} />
    <FeaturedProduct
      size="b"
      contentType="image"
      contentSource={featuredProducts.pk54}
    />
    <FeaturedProduct
      size="c"
      contentType="image"
      contentSource={featuredProducts.favn}
    />
    <FeaturedProduct
      size="d"
      contentType="image"
      contentSource={featuredProducts.artichoke}
    />
    <FeaturedProduct
      size="e"
      contentType="image"
      contentSource={featuredProducts.superloon}
    />
  </SectionFeaturedProducts>

const SectionFeaturedProducts = styled.div`
  display: grid;
  grid-gap: 0.5rem;
  grid-template-areas:
    "a a a a a b b b b"
    "a a a a a b b b b"
    "a a a a a c c c c"
    "d d d e e c c c c"
    "d d d e e c c c c";
  /* max-width: 1200px; */
  height: 800px;
`

Мой компонент для каждого видео / изображения: 

  const FeaturedProduct = ({ size, contentType, contentSource }) => {
      return (
        <FeaturedProductContainer size={size}>
          {contentType === "video" ? (
            <StyledVideo videoSource={contentSource} />
          ) : (
            <Image fixed={contentSource} />
          )}
        </FeaturedProductContainer>
      )
    }

const Image = styled(Img)`
  grid-column: 1/-1;
  grid-row: 1/-1;
  background-image: url(${props => props.imageSource});
  background-size: cover;
  height: 100% !important;
  width: 100% !important;
`

const StyledVideo = styled(Video)`
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 100% !important;
  width: 100% !important;
`

Если я заменяю видео на изображение, это прекрасно. Вся ширина столбца равна друг другу. Кто-нибудь может помочь мне определить проблему?

...