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

【问题标题】：How do I incorporate fluid width video with Parallax website?如何将流体宽度视频与 Parallax 网站合并？
【发布时间】：2014-06-12 11:53:49
【问题描述】：

我有一个基本的 Parallax 网站 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 有什么问题可以修复吗？

【问题讨论】：

标签： javascript css video parallax fluid-layout

【解决方案1】：

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

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

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

【讨论】：

谢谢，我认为这似乎解决了问题！ #youtube {height: 100%; position: relative;} #youtube iframe {width: 100%; height: 100%;}