Youtube iframe 播放器 blackspace 上下视频答案

【问题标题】：Youtube iframe player blackspace above and below videoYoutube iframe 播放器 blackspace 上下视频
【发布时间】：2019-04-06 13:56:11
【问题描述】：

当您访问纵横比为 21:9 https://www.youtube.com/watch?v=mlHklH5VBtI 的视频并尝试分享时，它会生成 iframe，其中width 为 560 像素，height 为 315 像素。

据我所知，560x315 的纵横比是 16:9。

315/560 = 0.5625
9/16 = 0.5625

应该是 560x240（21:9 纵横比）

240/560 = 0.428571
9/21 = 0.428571

第二个问题是 youtube 播放器在 21:9 宽高比的视频上上下显示某种黑色空间。

<iframe width="560" height="240" src="https://www.youtube.com/embed/mlHklH5VBtI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

iframe {
  margin: 50px 0 0 5px;
  border: 10px solid red;
}

您可以看到边框和视频之间的空白。我搜索了 youtube iframe 参数https://developers.google.com/youtube/player_parameters，但找不到任何对这个问题有用的东西。

https://codepen.io/balancana/pen/ZmzxQo

【问题讨论】：

标签： iframe youtube youtube-api youtube-iframe-api

【解决方案1】：

添加transparent=0url参数解决问题。

例如https://player.vimeo.com/video/24880291?transparent=0

【讨论】：