Question

我有一个基本的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>

我正在尝试保持我的Parallax功能，同时拥有一个流畅的视频，但我底部有一个奇怪的空白区域。我认为问题可能出现在我的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 */
}

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

1 个答案: