Question

你好，不知道是否有人可以提供帮助/

我在div中有一个视频，div变量的宽度和高度

<div class="videoSlpash">
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" >
      <source src="<?php echo get_template_directory_uri(); ?>/videos/splash.webm" type="video/webm">
      <source src="<?php echo get_template_directory_uri(); ?>/videos/splash.mp4" type="video/mp4">
      <img src="<?php echo get_template_directory_uri(); ?>/img/staticbacbkground.jpg" class="headerImage imgFullWidth" alt="">
    </video>
</div>

，视频尺寸为1600x800

现在我在这里绕圈试图拿出数学来使这个工作，但如果我用英语对，有人可能会帮助

我需要发生的是，如果容器可以说：

1600 x 900 - 它需要100％的视频高度或它不会填充容器 1000 x 400 - 它需要100％宽度才能填充容器

视频总是必须填充容器，如果其比例高度不足以填充容器使其100％高度，如果其配给宽度不足以填充容器，它将是100％宽度

真的希望这有意义

我将使用JQuery来做我需要的一些指针

下面是我的目标，我知道这一切都错了

function resizeDiv() {
  vph = $(window).height();
  nav = $('.headerWrap').height() - 10;
  vpw = $(window).width();
  hei = vph - nav + 4;
  vh = $('#video_background').height();
  vw = $('#video_background').width();


  $('.videoSlpash').css({'height': hei + 'px'});
  $('.videoSlpash').css({'padding-top': nav + 'px'});



if ((vpw > 1600) || (hei < 800)) {
    $('#video_background').css({'height': 'auto'});
    $('#video_background').css({'width': '100%'});
    console.log('bg 1');
    console.log('Height '+hei);
    console.log('vpw ' +vpw);

} else if ((vpw < 1600) || (hei > 800)) {
    $('#video_background').css({'height': '100%'});
    $('#video_background').css({'width': 'auto'});
    console.log('bg 3');
    console.log('Height '+hei);
    console.log('vpw ' +vpw);

} else if ((vpw > 1600) || (hei > 800)) {
    $('#video_background').css({'height': '100%'});
    $('#video_background').css({'width': 'auto'});
    console.log('bg 2');
    console.log('Height '+hei);
    console.log('vpw ' +vpw);

} else if ((vpw < 1600) || (hei < 800)) {
    $('#video_background').css({'height': '100%'});
    $('#video_background').css({'width': 'auto'});
    console.log('bg 4');
    console.log('Height '+hei);
    console.log('vpw ' +vpw);


  }

奇

Answer 1

抱歉，其中一天我自己修理了

   function resizeDiv() {
      vph = $(window).height();
      nav = $('.headerWrap').height() - 10;
      vpw = $(window).width();
      hei = vph - nav + 4;
      actualH = (800 / 1600 * vpw);

      $('.videoSlpash').css({'height': hei + 'px'});
      $('.videoSlpash').css({'padding-top': nav + 'px'});

      if (actualH < hei) {
        $('#video_background').css({'height': '100%'});
        $('#video_background').css({'width': 'auto'});
      }

  else {
    $('#video_background').css({'height': 'auto'});
    $('#video_background').css({'width': '100%'});
  }
}

试图让我的视频总是填满我的容器

1 个答案: