javascript - 在鼠标悬停时将背景颜色更改为视频

Question

我是视频背景的新手。

我的问题是，当我悬停每一侧时，我可以将每一侧(右侧或左侧)的颜色背景更改为来自 youtube 的视频吗？

所以实际上，当我将鼠标悬停在左侧时......橙色背景将替换为特定的 youtube 视频，当我将鼠标悬停在右侧(红色背景)时，它将播放视频(与左侧不同)作为背景.

我已经在网上搜索了几个小时，但就是找不到合适的解决方案。

这是我的代码:

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.left {
    left: 0;
    background-color: #E9D94C;
}

.right {
    right: 0;
    background-color: #EA2029;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.centered img {
    width: 100px;
    border-radius: 50%;
}

<div class="container col-md-10">
  <div class="top-intro" style="position: relative;padding:20px;height:auto;margin:0 auto;font-family: arial;font-size: 12px;z-index: 99999;font-size: 15px;color: #000;text-align: center;border-radius: 10px;top:25px;background:rgba(255,255,255,0.5);">
    Lorem ipsum sit amet dolor
  </div>
</div>
<div class="container-fluid">
  <div class="split left">
    <div class="centered">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar woman">
      <h2>Jane Flex</h2>
      <p>Some text.</p>
    </div>
  </div>

  <div class="split right">
    <div class="centered">
      <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar man">
      <h2>John Doe</h2>
      <p>Some text here too.</p>
    </div>
  </div>
</div>

这是我的完整代码:http://jsfiddle.net/xkobLdv9/4/

或者我需要一些类似 javascript 的东西来做这个？如果有人能提供解决方案，将不胜感激，因为我不了解 javascript 中的东西。

谢谢大家，

Answer 1

我给你举了一个小例子:希望这对你有帮助: https://jsfiddle.net/pkbxupxc/4/

(视频无法在 stackoverflow 中播放(但在 jsfiddle 上可以播放)。

基本上我所做的就是将 iframe 放在 div 中，给它 100% 的宽度和高度，然后将它设置为 display:block on hover 和 display:none 作为默认值。

.hoverMe {
  background: coral;
  height: 400px;
  width: 100%;
  position: relative;
}

.hoverMe iframe {
  padding: 0;
}

.hidden {
  display: none;
}

.hoverMe:hover iframe.hidden {
  display: block;
}

.foreground {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba (255, 255, 255, 0.7);
}

<div class="hoverMe">
  <iframe class="hidden" width="100%" height="100%" src="https://www.youtube.com/embed/avmjunRX_xo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  <div class="foreground">
    <h1>
      Hello World
    </h1>
  </div>
</div>