我想在我的网站上放一个响应式的 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/ 谢谢!
最佳答案
来自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);
}
关于javascript - 响应式嵌入式 youtube,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59599712/