Youtube iframe 播放器在视频上方和下方留白
Youtube iframe player blackspace above and below video
当您访问宽高比为 21:9 https://www.youtube.com/watch?v=mlHklH5VBtI 的视频并尝试分享时，它会生成 iframe，其中 width 为 560px，height 为 315px。
据我所知，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 但找不到对这个问题有用的参数。
添加transparent=0url参数解决问题。
当您访问宽高比为 21:9 https://www.youtube.com/watch?v=mlHklH5VBtI 的视频并尝试分享时，它会生成 iframe，其中 width 为 560px，height 为 315px。
据我所知，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 但找不到对这个问题有用的参数。
添加transparent=0url参数解决问题。