视频上方和下方的YouTube iframe播放器空白

Question

当您访问纵横比为21：9 https://www.youtube.com/watch?v=mlHklH5VBtI的视频并尝试共享时，它将生成其中 subSideNav(id) { const navProperty = document.getElementById('subTitleSideNav'); const navWidth = window.getComputedStyle(navProperty, null).getPropertyValue('width'); //const boxProperty = document.getElementById('boxPosition'); if (navWidth === '0px') { // Open sidenavbar document.getElementById('subTitleSideNav').style.width = '140px'; this.titleID = id; //console.log(boxProperty); } } 为560px和width为315px的iframe。

我知道560x315是16：9的宽高比。

height

应为560x240（宽高比为21：9）

315/560 = 0.5625
9/16 = 0.5625

第二个问题是youtube播放器在纵横比为21：9的视频上方和下方显示某种空白。

240/560 = 0.428571 9/21 = 0.428571

<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>

您可以看到边框和视频之间的空白。 我搜索了YouTube iframe参数https://developers.google.com/youtube/player_parameters，但找不到解决此问题的任何有用的方法。

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

Answer 1

添加transparent=0网址参数可以解决问题。

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