Блог

Я пытаюсь встроить видео с YouTube в tippy, используя следующий код. Лучшее, что я могу сделать, это установить минимальную ширину: 400 пикселей; на yt-контейнере. Без этого видео даже не покажут. Есть ли способ сделать его таким широким, как он помещается в окне просмотра, но при этом оставаться отзывчивым на небольших экранах? Типпи добавляется в тело.

 .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',
          
              
            });