0
votes

When you visit video which have aspect ratio 21:9 https://www.youtube.com/watch?v=mlHklH5VBtI and try to share, it will generate iframe in which width is 560px and height 315px.

As I know 560x315 is 16:9 aspect ratio.

315/560 = 0.5625
9/16 = 0.5625

It should be 560x240 (21:9 aspect ratio)

240/560 = 0.428571
9/21 = 0.428571

Second problem is that youtube player is displaying some kind of blackspace above and below on 21:9 aspect ratio videos.

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

enter image description here

You can see blackspace between border and video. I searched through youtube iframe parameters https://developers.google.com/youtube/player_parameters but couldn't find any useful for this problem.

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

1

1 Answers

0
votes

Adding transparent=0 url parameter solve problem.

e.g. https://player.vimeo.com/video/24880291?transparent=0