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

Posted 2023-03-06

【中文标题】如何使 ReactPlayer 随高度和宽度缩放

【英文标题】：How to make ReactPlayer scale with height and width

【发布时间】：2018-08-29 20:03:02

【问题描述】：

我正在将 reactplayer 用于使用 iframe 的 youtube 视频。我正在尝试将视频缩放到我的 div 并且我希望它能够响应。

我在 ReactPlayer 上的 100% 上放置了 width 和 height，并且我有一个包装器 div，我在其上放置了高度和宽度，但 reactplayer 不适合该 div。无论我如何调整屏幕大小，它都停留在 150px 的高度。

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

.css

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

【问题讨论】：

更全面的解决方案见github.com/CookPete/react-player/issues/145

【参考方案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，我们可以利用 'padding-top' 的百分比来完美地缩放内容。

生成 16:9 的百分比

(9 / 16) * 100 = 56.25

【讨论】：

存在.player-wrapper 的父级在某些情况下宽度为0 的问题......我的情况我将.player-wrapper 的父级的with 设置为100%，这很好。

我想指出，随着 css "aspect-ratio: 16/9;" 的出现，这种 hack 现在是多余的。在包装器 div 上，您的烦恼将消失。

@nrmad 不幸的是，由于浏览器支持，这并不是完全多余的。纵横比适用于大多数浏览器，但如果您希望获得通用体验，您仍然希望利用 CSS 支持作为后备。 @supports not (aspect-ratio: 1 / 1) // add CSS hack here

【参考方案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
      
      
      controls=false
    />
  </div>
);

export default Player;

【讨论】：

听从您的建议（使用 CSS 模块）- 包装器占用了空间，但播放器没有出现..

我又试了一次——效果很好。检查你的代码。检查示例jsfiddle.net/e6w3rtj1

很好的答案，谢谢！

【参考方案3】：

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

【参考方案4】：

使其响应的最简单方法是将宽度添加为 100%

<ReactPlayer
  controls
  pip
  
  url=_post.videolink
 /> 

【参考方案5】：

你可以填写：

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