Question

我正在使用reactplayer播放使用iframe的YouTube视频。我正在尝试将视频缩放到我的div，我希望它能够响应。

我在width放了一个height和100%在ReactPlayer上，我有一个包装div，我把高度和宽度打开，但是reactplayer不适合div。无论我如何调整屏幕大小，它都会被卡在150px的高度。

<div className="video-wrapper>
  <ReactPlayer
            width="100%"
            height="100%"
            url="https://youtu.be/BGhqlJnFIXU"
            controls
            muted
            config={{
              youtube: {
                playerVars: { showinfo: 1 }
              }
            }}
          />
</div>

的CSS

.video-wrapper {
 height: 100%;
 width: 100%;
 min-height: 225px;
}

Answer 1

通过进一步扩展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，我们可以使用百分比来填充顶部＆＃39;完美地扩展内容。

生成16：9的百分比

（9/16）* 100 = 56.25

Answer 2

为了强制 react-player 完全响应，我做了以下事情：

CSS

.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;

Answer 3

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

如何使ReactPlayer按高度和宽度缩放

3 个答案: