Search code examples
htmlcssyoutubeaspect-ratiovidstack-player

How to contain vertical YouTube video in Vidstack (without "more videos" UI)

By default, Vidstack zooms/crops a vertical YouTube video into a 16/9 aspect ratio:

enter image description here

If the height: 1000% styling is disabled, the vertical video is contained as desired. However, unwanted elements like the "more videos" UI are added when the video is paused.

enter image description here

Is there a way to both contain the vertical video in a 16/9 frame and hide the "more videos" UI?

The player should support both vertical and horizontal videos so hard-coding the width and height in CSS is not acceptable. However, dynamically setting the width and height based on the video is acceptable (if this information is available).

If the following CSS is added, the vertical video fits, but I am unable to reduce the height of the player (to the same height as a 16/9 video) without introducing cropping/zooming.

media-player {
    aspect-ratio: 9/16;
}

The screen captures above used this minimal source code:

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
        <link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
    </head>

    <script src="https://cdn.vidstack.io/player" type="module"></script>

    <media-player src="youtube/IF_7SLHdreQ">
        <media-provider></media-provider>
        <media-video-layout></media-video-layout>
    </media-player>
</html>

References:

Solution

  • enter image description here

    I figured it out:

    • Make YouTube iframe tall so branding can be cropped out.

    • Size the div containing the iframe so the video just fits in the center.

    • Place that div in the middle of another div that maintains the desired size of the video player: when different sizes, the youtube video is zoomed/cropped/letterboxed as needed.

    • https://codepen.io/leftium/pen/mybLzNb

        .all-videos {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        margin-block: 200px;
    }

    // Size and adjust 4 video player frames:
    player-container {
        display: flex;
        justify-content: center;

        // Limit height via aspect ratio:
        aspect-ratio: 16/9;

        border: 4px solid cyan;

        width: 33%;
    }

    player-container.vertical {
        width: 10%;
    }

    .youtube-container {
        display: flex;
        flex-direction: column;
        justify-content: center;

        aspect-ratio: 9/16;

        // No clicking/hover effects
        // pointer-events: none;

        // overflow: hidden;

        &.horizontal {
            width: 100%;
        }

        iframe {
            width: 100%;
            flex-shrink: 0;
            height: calc(100% + 400px);
            opacity: 0.6;
        }
    }