如何在Vidstack中适配竖版YouTube视频并隐藏"更多视频"界面

1. 隐藏YouTube暂停时的推荐元素 #

Vidstack集成YouTube播放器时，可通过media-provider的player-options属性传递YouTube官方播放器参数，直接控制界面元素显示：

<media-provider player-options='{"rel": 0, "modestbranding": 1, "iv_load_policy": 3}'></media-provider>

参数说明：

• rel: 0：暂停时隐藏非同一频道的相关视频推荐
• modestbranding: 1：隐藏YouTube的logo标识
• iv_load_policy: 3：隐藏视频内嵌的注释内容

2. 自适应横竖屏视频，保持16:9播放器容器 #

要让竖版视频完整适配16:9播放框且不被裁剪，需修改Vidstack内部视频元素的object-fit属性，同时固定播放器宽高比：

/* 固定播放器为16:9比例 */
media-player {
    aspect-ratio: 16/9;
    width: 100%; /* 可根据实际布局调整 */
}

/* 让视频完整显示，用黑边填充空白区域，避免裁剪 */
media-player media-video {
    height: auto !important;
    object-fit: contain;
}

3. 动态调整播放器高度（可选） #

如果需要根据视频实际比例动态调整播放器高度（而非固定16:9），可监听Vidstack的loadedmetadata事件获取视频自然宽高，再计算比例设置样式：

const player = document.querySelector('media-player');

player.addEventListener('loadedmetadata', () => {
    const video = player.video;
    const aspectRatio = video.videoWidth / video.videoHeight;
    player.style.aspectRatio = aspectRatio;
});

这种方式会让播放器自动适配视频本身的宽高比，同时结合上述YouTube参数配置，也能隐藏暂停时的多余元素。

完整示例代码 #

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
        <link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
        <style>
            media-player {
                aspect-ratio: 16/9;
                width: 80%;
                margin: 0 auto;
            }
            media-player media-video {
                height: auto !important;
                object-fit: contain;
            }
        </style>
    </head>

    <script src="https://cdn.vidstack.io/player" type="module"></script>
    <script>
        // 可选：动态适配视频原生比例
        const player = document.querySelector('media-player');
        player.addEventListener('loadedmetadata', () => {
            const video = player.video;
            player.style.aspectRatio = `${video.videoWidth}/${video.videoHeight}`;
        });
    </script>

    <media-player src="youtube/IF_7SLHdreQ">
        <media-provider player-options='{"rel": 0, "modestbranding": 1, "iv_load_policy": 3}'></media-provider>
        <media-video-layout></media-video-layout>
    </media-player>
</html>

注意事项 #

• YouTube播放器参数可能随官方政策调整，若部分参数失效，可参考官方文档调整参数配置。
• 使用动态比例适配时，需确保播放器父容器做好布局兼容，避免页面排版错乱。

内容的提问来源于stack exchange，提问作者Leftium