我如何让我的嵌入式Vimeo视频动态调整屏幕的宽度

How do I get my embedded Vimeo video to resize dynamically to the width of the screen?

本文关键字：调整 动态 屏幕 视频 Vimeo 我的 嵌入式      更新时间：2023-09-26

如何让我的嵌入式Vimeo视频动态调整大小到屏幕的宽度?

这是嵌入的视频代码:

    <div id="vimeoVideo">
        <iframe src="//player.vimeo.com/video/99345430?title=0&amp;byline=0&amp;portrait=0&amp;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。它在页面加载时调整大小，而不是在窗口调整大小时动态调整。

相关文章：