格式化 Youtube iFrame 嵌入和维护黑色边栏

Question

问题：我希望 Youtube 播放器 保留侧面的黑条 以防止视频变得太大。这就是 Youtube 对其网站上的视频所做的。但是，当我使用嵌入时，视频占用了 100% 的宽度。

I am currently using react-youtube for their Youtube component.

播放器实现

const opts = {
    height: '100%',
    width: '100%',

    playerVars: {
        autoplay: 0,
    },
}

<YouTube videoId={heroVideo.videoId} 
  opts={opts} 
  onEnd={() => finishedVideo(heroVideo, playlistDisplay, playlistIndex, videos)}/>

球员造型

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    /*padding-top: 25px;*/
    height: 0;
    display: block;
    background-color: black;

}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: black;
}

图片供参考。两者相同的视频，相同的屏幕宽度。

所需的视频显示行为。在 youtube.com

视频显示不正确。在我的应用程序上

我正在寻找的另一个视频显示参考

Answer 1

目前的解决方案（除了我发现的任何错误）是更新 CSS。

删除 padding-bottom 并将高度设置为 100%。

.videoWrapper {
position: relative;
height: 100%; 
display: block;
background-color: black;

}

格式化 Youtube iFrame 嵌入和维护黑色边栏

Formatting Youtube iFrame Embed and Maintain Black Side Bars

youtube

iframe

reactjs

youtube-iframe-api