这可以通过进一步扩展你的CSS来实现。由于大多数视频都是在16：9拍摄的，遵循this guide by Chris Coyier将使这个过程更容易实现。
由于您使用的是React-Player，因此我使用的是位于他们demo page上的内容。

.player-wrapper {
  width: auto; // Reset width
  height: auto; // Reset height
}
.react-player {
  padding-top: 56.25%; // Percentage ratio for 16:9
  position: relative; // Set to relative
}

.react-player > div {
  position: absolute; // Scaling will occur since parent is relative now
}

为什么有效

TL;DR -填充百分比是基于宽度的。通过将元素的高度设置为0，我们可以利用填充顶部的百分比来完美地缩放内容。

生成16：9的百分比

（9 / 16）* 100 = 56.25

为了迫使玩家完全React，我做了以下操作：
中央支助系统

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

JSX公司

import React from "react";
import ReactPlayer from "react-player";
import "./Player.css";

const Player = () => (
  <div className="player-wrapper">
    <ReactPlayer
      url="https://youtu.be/3eLrINg3O2Q"
      className="react-player"
      playing
      width="100%"
      height="100%"
      controls={false}
    />
  </div>
);

export default Player;

最简单的方法，使它的React是增加宽度为100%

<ReactPlayer
  controls
  pip
  width="100%"
  url={_post.videolink}
 />

您可以填写：

.react-player > video {
   position: absolute;
   object-fit: fill;
 }

你可以保持宽度固定，然后允许高度调整根据视频高度不同的视频有自己的大小一样100*200. .video-wrapper > video { width: 55vw; height: min-content; }

对于更现代的方法，只需向React Player组件添加一个类，并将其设置为：

height: auto !important;
aspect-ratio: 16/9;

https://caniuse.com/mdn-css_properties_aspect-ratio

我是这么做的。

video { object-fit: cover; }

现在，可以通过调整 Package 器的大小来调整视频的大小。

如果您正在使用Tailwindcss和Swiper，则可以使用以下代码
此代码实现了最后一个aspect-video类，以确保纵横比始终正确
同时确保如果用户滚动到下一页，前一个播放器会暂停
您还可以设置视频的最大宽度，这里是“max-w-6xl”

import React, { useEffect, useState } from 'react'
import ReactPlayer from 'react-player'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from "swiper";
const videos = [
  {
    id: 1,
    url: "https://www.youtube.com/watch?v=1234"
  },
  {
    id: 2,
    url: "https://www.youtube.com/watch?v=1234"
  },
  {
    id: 3,
    url: "https://www.youtube.com/watch?v=1234"
  }
];

const IndexHero = () => {
  const [domLoaded, setDomLoaded] = useState(false);
  const [isPlaying, setIsPlaying] = useState(null);
  useEffect(() => {
    setDomLoaded(true);
  }, []);

  return (
    <>
    <div className='h-auto'>
      {!domLoaded && (
        <div className="flex items-start justify-center">
          <div className="flex-1 max-w-6xl">
            <div className="aspect-video">
            {/** For CLS */}
            </div>
          </div>
        </div>
      )}
      {domLoaded && (
      <Swiper
          modules={[Pagination]} 
          pagination={true} 
          className="h-full "
          onSlideChange={() => {
            setIsPlaying(null);
          }}
          autoplay={false}
          watchSlidesProgress={true}
        >
          {videos.map((data) => (
            <SwiperSlide key={data.id}>

              <div className="flex items-start justify-center">
                <div className="flex-1 max-w-6xl"> 
                  <div className="aspect-video">
                  <ReactPlayer
                      key={data.id}
                      url={data.url}
                      width="100%"
                      height="100%"
                      controls={true}
                      onPlay={() => {
                        setIsPlaying(data.id);
                      }}
                      playing={isPlaying === data.id}
                    />
                  </div>
                </div>
              </div>              
            </SwiperSlide>
            ))}
        </Swiper> )}
      </div>
    </>
  );
};

export default IndexHero;