2

这是我想要完成的。我有背景，我想在上面放置一个 iframe 元素。

我使用的html如下：

<div id="container">
    <img src="images/videoframe.png" id="img1" />
    <iframe id="img2" width="370" height="209" src="http://www.youtube-nocookie.com/embed/BWW7te-P5Ak?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

我用来完成此操作的 CSS 如下：

#container {
    position:relative;
}

#img2 {
    position: absolute;
    left: 50px;
    top: 29px;

我设法让它完美地工作。我的问题是……我有一个固定的页脚，而 iframe（但只有 iframe）重叠并覆盖了固定页脚的一部分。

我的固定页脚的 html 如下：

<div class="floatingfooter">
  <a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FacebookIcon','','images/socialmedia/Stone-FaceBook2.png',1)"><img src="images/socialmedia/Stone-FaceBook.png" alt="Like Us on Facebook" name="FacebookIcon" width="86" height="85" border="0" class="centerimage" id="FacebookIcon" /></a>

<a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MySpaceIcon','','images/socialmedia/Stone-MySpace2.png',0)"><img src="images/socialmedia/Stone-MySpace.png" alt="Add Us on MySpace" name="MySpaceIcon" width="85" height="85" border="0" class="centerimage" id="MySpaceIcon" /></a> 



<a href="http://www.reverbnation.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ReverbNationIcon','','images/socialmedia/Stone-Reverb2.png',1)"><img src="images/socialmedia/Stone-Reverb.png" alt="Listen to us on Reverbnation" name="ReverbNationIcon" width="85" height="85" border="0" class="centerimage" id="ReverbNationIcon" /></a> 
<a href="http://twitter.com/traumaslavefan" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TwitterIcon','','images/socialmedia/Stone-Twitter2.png',1)"><img src="images/socialmedia/Stone-Twitter.png" alt="Follow Us on Twitter" name="TwitterIcon" width="86" height="85" border="0" class="centerimage" id="TwitterIcon" /></a><a href="http://www.youtube.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YouTubeIcon','','images/socialmedia/Stone-YouTube2.png',1)"><img src="images/socialmedia/Stone-YouTube.png" alt="Watch Our YouTube Channel" name="YouTubeIcon" width="85" height="85" border="0" class="centerimage" id="YouTubeIcon" /></a></div>

我的固定页脚的 CSS 在这里：

.floatingfooter {
    color: #ffffff;
    font-size: 14px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #7A6D50;
    text-align: center;
    position:fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 105px;
    z-index: 100000;
    vertical-align: middle;
    padding-top: 20px;
}

当前发布代码的网站是 www.traumaslave.com

这真的让我很难过。

我处于早期设计阶段，所以我知道我的编码非常粗糙。我需要清理它。但是，我想知道

如何使 iframe 在固定页脚下滚动

或者

如果有人有任何更好的想法将 iframe 放在一个整洁的背景中以规避这个问题

或者

如果问题出在 iframe 本身，是否有人知道嵌入不包含 iframe 的 youtube 视频的解决方案，并且仍然允许编码以将视频嵌入到背景中。

非常感谢！

珍妮弗

4

1 回答 1

0

所以我最终将静态页脚更改为静态侧边栏。它最终看起来更好，我不需要担心重叠的元素。我仍然非常失望，以至于我没有收到任何回复。:( 因此，如果有人遇到同样的问题并查看此帖子，我建议您尝试使用侧边栏。它对我很有用，因为我的导航窗格是水平的，所以它看起来并不古怪。

快乐编码！

珍

于 2012-06-02T02:58:30.717 回答