如何正确放置超过100％的宽度

编程问答 2022-08-12

问题描述

我正在像http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--youtube-autoplay-with-custom-thumbs中那样使用react-active-carousel来创建youtube视频的旋转木马。

我要删除图片中所示两侧的黑匣子。

with black sides

我使用了<ReactPlayer width="100%" url={url} playing={isSelected} height="100%" /> 。

当我尝试width=120%时，我会得到所需的结果。

with one black side

有什么方法可以使视频居中显示，以便覆盖整个区域，而两侧都没有黑色空间。

解决方法

您可以通过使用样式来使播放器居中。

<ReactPlayer style={{margin:"auto",text-align:"center",width="100%"}} url={url} playing={isSelected} height="100%" />

carouselreact-playerreactjsreactjsreactjsreactjs