javascript - 如何将流体宽度视频与 Parallax 网站合并？

Question

我有一个基本的视差网站 here ，但是当我尝试添加动态嵌入式 youtube 视频时出现错误。流体宽度视频解释 here

<section id="youtube" class="bg_parallax" data-type="background" data-speed="10">
    <iframe src="http://www.youtube.com/embed/CsaL_BDAeqA?rel=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="home" class="bg_parallax" data-type="background" data-speed="20"></section>
<section id="about" class="bg_parallax" data-type="background" data-speed="40"></section>
<section id="blog" class="bg_parallax" data-type="background" data-speed="80"></section>
<section id="contact" class="bg_parallax" data-type="background" data-speed="160"></section>

我试图保持我的视差功能，同时拥有流畅宽度的视频，但我在底部有那个奇怪的空白。我认为问题可能出在我的 CSS 中的某个地方，但所有属性都非常具体，以使视差效果正常工作。

#youtube {
  padding-bottom: 56.25%;
}

#youtube iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

这是我的允许视差滚动的 jQuery。

$(document).ready(function(){
    $objWindow = $(window);
    $('div[data-type="background"]').each(function(){
        var $bgObj = $(this);
        $(window).scroll(function() {
            var yPos = -($objWindow.scrollTop() / $bgObj.data('speed')); 
            var coords = '100% '+ yPos + 'px';
            // Animate the background
            $bgObj.css({backgroundPosition:coords});
        });
    });
});

我可以想出一些 hack-y 解决方案，但是我的 JS 或 CSS 有什么问题可以修复吗？

Answer 1

我注意到当您更改浏览器窗口宽度时图像会消失。

撇开这个问题不谈，您是否尝试过将相对位置应用到您的 YouTube 部分？即

#youtube {
  padding-bottom: 56.25%;
  position: relative; /* All your other <section> blocks use this */
}