iframe - Tippy js youtube 嵌入响应式

Question

我正在尝试使用以下代码将 youtube 视频嵌入到tippy中。我能做到的最好的设置 min-width: 400px; 在 yt 容器上。没有那个视频甚至不会显示。有没有办法让它变宽，因为它适合视口但仍然在小屏幕上保持响应？Tippy 被添加到正文中。

.yt-container {
            overflow: hidden;
            position: relative;
            width:100%;
            min-width: 400px;
        }

        .yt-container::after {
            padding-top: 56.25%;
            display: block;
            content: '';
        }

        .yt-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }



tippy('#myButton', {

               content: '<div class="yt-container"><iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>',

                allowHTML: true,
                interactive: true,
                trigger:'click',
          
              
            });