如何让我的嵌入式Vimeo视频动态调整大小到屏幕的宽度?
这是嵌入的视频代码:
<div id="vimeoVideo">
<iframe src="//player.vimeo.com/video/99345430?title=0&byline=0&portrait=0&color=ff9933" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
我尝试的第一件事是设置宽度:100%和height: inherit但它不大小视频本身。只将iframe拉伸到屏幕的宽度。
我要做的是确保视频在任何屏幕尺寸下都是可见的,而不仅仅是预设尺寸的数组。我知道我能抓住屏幕。宽度与Javascript,但我难倒了,我如何将其与iframe对象。除此之外,还要计算高度所需的尺寸。我知道从宽度得到高度的数学方法是:H = W x 0.5625
我真的很感谢你对我的帮助。
干杯!
我不能在上面发表评论,但是与其使用JS来设置每个窗口的高度(如果你有一个灵活的宽度),不如使用CSS来代替。
.container {
position: relative;
padding-top: 56.26%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00;
}
<div class="container">
<div class="video"></div>
</div>
回答我自己的问题:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
var show_width = $(window).width();
document.getElementById("vimeoVideoPlayer").style.width = (show_width) + 'px';
document.getElementById("vimeoVideoPlayer").style.height = (show_width * 0.5625) + 'px';
});
</script>
必须附加到iFrame。它在页面加载时调整大小,而不是在窗口调整大小时动态调整。