当您访问长宽比为21:9 https://www.youtube.com/watch?v=mlHklH5VBtI的视频并尝试共享时，它将生成其中width为560px和height 315px的iframe。
据我所知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
最佳答案
添加transparent=0 url参数可以解决问题。
例如https://player.vimeo.com/video/24880291?transparent=0
关于iframe - 视频上方和下方的YouTube iframe播放器空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53116581/