javascript - 元素在 HTML/CSS 中移出容器

Question

我有一个循环播放的视频标题，它是使用我找到的一段代码实现的。我在上面覆盖了文本和一个按钮。在我到达某个断点之前它看起来还不错，然后文本和按钮移到视频容器之外。

我尝试将我认为视频所在的 div 放入，但它只是从 View 中完全删除了文本和按钮。

网站是 kgshowroom.com/test，珊瑚色的“你好”按钮和文字显示“KG Showroom You're on our site”。

这是我认为我应该调整的代码:

(视频容器？)

<div class="header-video">
    <img src="img/masthead.jpg"
         class="header-video--media"
         data-video-src="0CxWLQxvY9g"
         data-teaser-source="video/masthead-teaser"
         data-provider="Youtube"
         data-video-width="500"
         data-video-height="281">
    <a href="http://vimeo.com/87701971">


  </div>

(文本和按钮部分？)

<div id="header">
      <!-- Inner -->
        <div class="inner" style="position: relative; z-index: 999; top: 0px; width: 50%; margin: 0 auto; text-align: center;">
          <header>
            <h1>
               <a href="index.html" id="logo"><img src="images/KG-logo.png"><br />KG Showroom</a></h1>
            <p>You're on our site.</p>
          </header> 

          <footer>
            <a href="#banner" class="button circled scrolly">Hello!</a>
          </footer>

        </div>

我尝试将“文本和按钮部分”移动到“视频容器”中结束 div 标记上方的位置，但它只是让文本和按钮消失了。

有人知道我在这方面哪里出错了吗？我希望它在所有断点处保持覆盖并以视频为中心，无论屏幕大小如何。

此外，循环播放的视频可以在我的 Samsung Note II 上播放，但不能在我兄弟的 Samsung Galaxy(5？)上播放。测试时，它会在我的桌面上以不同尺寸播放；代码中是否有什么东西导致它无法在我兄弟的手机上运行？

谢谢!

Answer 1

看起来 script.js 中的 HeaderVideo 函数正在动态调整 header-video 类的大小，这说明了您的大小调整问题。您可能想要修改该函数中的逻辑或利用 media queries .