API 调用后 HTML 视频不适合 - next.js 和 styled-components答案

【问题标题】：HTML video doesn't fit after API call - next.js and styled-componentsAPI 调用后 HTML 视频不适合 - next.js 和 styled-components
【发布时间】：2021-08-25 11:09:46
【问题描述】：

我有这个 Facebook 克隆，用户应该能够发布视频、发布出版物等所有内容。

我的应用程序中的问题是，每次我进行操作时，例如点赞酒吧或创建评论，它都会对服务器进行 API 调用，并且因为我将 SWR 挂钩与 Next.js 一起使用，在 API 调用之前，我必须改变我的缓存（数据），这使得数据可以重新渲染，并且应用程序中的视频会瞬间消失。这导致容器的高度适合之前的视频例如25vh，当视频消失时容器变为22vh，那些3vh 提供糟糕的体验，因为如果我喜欢一个帖子，用户会感觉屏幕无故移动了。

我该怎么做才能让我的 HTML 标签视频，即使它可能不存在，我希望它具有适合容器所需的高度（因为我不希望所有视频都具有相同的高度，一些它们可能很大，其中一些很小）。

让我给你看一些代码。

当我喜欢酒吧时

const LikePub = async (): Promise<void> => {}

这是视频

{/* Image */}
{publication.photo && (
    <PubImage>
        {publication.photo.split("")[5] === "v" ? (
            <video
              // src={publication.photo}
              controls={onVideo}
              onMouseOver={() => setOnVideo(true)}
              onMouseOut={() => setOnVideo(false)}
            >
              <source src={publication.photo} />
            </video>
        ) : (
            <img src={publication.photo} alt="" />
        )}
    </PubImage>
)}

这些是样式

// PubImage

export const PubImage = styles.div`
    width: 100%;
    img, video {
        width: 100%;
        min-height: 28vh;
        max-height: 80vh;
        object-fit: cover;
        display: block;
    }
`;

我能做什么？我是否必须为所有视频设置相同的高度（我不希望这样）？

【问题讨论】：

如果你把视频放在容器里面，设置容器的刚性宽度和高度，把你的视频垂直居中放在容器里面呢？
感谢您的回答，但我已经找到了解决方案！
@Diego 您可能希望添加您的解决方案作为您自己问题的答案，以帮助将来可能面临类似问题的用户。

标签： html reactjs next.js styled-components

【解决方案1】：

我找不到我想要的答案，如果你可能遇到类似的问题，直接设置属性高度，这样视频和容器会有相同的度量

【讨论】：