javascript - 响应式嵌入式 youtube

Question

我想在我的网站上放一个响应式的 YouTube 视频。我需要它在桌面和移动设备上看起来不错。这是我尝试的代码:

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

    <!--Gallery section-->
    <section id="songs" class="gallery main brd-bottom">
        <div class="container">
            <h1>נזילה בגוף - מוראס (אודיו)</h1>
            <div class="iframe-container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/krhum9lNoXw"
                        frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>
                </iframe>
                <h1 class="large list-inline-item">
                    <a href="https://www.youtube.com/watch?v=krhum9lNoXw"
                       class="hover-effect"><i class="icon-youtube"></i> </a>
                </h1>
                <h1 class="large list-inline-item">
                    <a href="https://open.spotify.com/artist/3YX6pjxMfcQ1r2yPJaxpBi"
                       class="hover-effect"><i class="icon-spotify"></i> </a>
                </h1>
            </div>
            <!--End song-->
        </div>
        <!-- End container -->
    </section>
    <!--End gallery section-->

这是它当前查看我的网站的方式: 我是 CSS 和 HTML 的新手，所以如果我忘记上传任何东西，请告诉我，我会添加它。要查看我正在处理的网站，您可以查看:http://nhrnhr0.pythonanywhere.com/谢谢!

Answer 1

来自docs : 你应该使用播放器 setSize 方法

如果您希望在调整页面大小时执行此操作，请使用 window.resize 事件(如 MDN 中所述)

简而言之:

window.onresize = function() {
    // make sure the player variable is global or visible in current scope in your code
    player.setSize(window.innerWidth, window.innerHeight); 
}