Reports

Vidstack provides the CSS hack (height: 1.000%) to avoid the YouTube branding resulting in the excessive height of portrait (9/16) videos if the player itself has a 16/9 layout.

For me adding 2 lines of CSS does the job:

iframe.vds-youtube[data-no-controls] {
    height: 1000%;
}

by adding a matching width to this, the video is shown as expected and a margin fix places the video in the center of the player.

iframe.vds-youtube[data-no-controls] {
    height: 1000%;
    width: calc(100% / 16 * 9 * 9 / 16);
    margin: 0 auto;
}

This does the job. But still I need to apply this manually, which can be a real pain.

Does anyone know a solution to automatically detect if we handle a portrait or landscape video from YouTube?

79593304