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％宽度＆amp;高度，然后将其设置显示：悬停时阻止，默认情况下显示：无。

.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>

Answer 2

也想为自己尝试这个，所以我使用JQuery创建了你需要的东西这里是它的链接JSFIddle。只是悬停在角色的脸上。

<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">
        <iframe width="640" height="360" src="https://www.youtube.com/embed/N7ZmPYaXoic" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      <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">
         <iframe width="640" height="360" src="https://www.youtube.com/embed/cKhVupvyhKk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      <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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.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: 0;
    text-align: center;
    right: 0;
}

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

.centered iframe {
     display: none;
    /* position: absolute; */
    width: 100%;
    /* left: 0; */
    /* right: 0; */
    height: auto;
}
</style>
<script>
$('.split').on('mouseover', function() {
 $(this).find('img').hide();
    $(this).find('iframe').show();
});

$('.split').on('mouseout', function() {
    $(this).find('iframe').hide();
    $(this).find('img').show();
});
</script>

Answer 3

这适用于您：

以下代码段视频无法在 StackOverflow 中播放，但在小提琴和其他页面中效果很好：

＆＃13;

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left_video,
.right_video {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  /* overflow-x: hidden; */
  padding: 0px;
  display: none;
  pointer-events:none;
}

.right_video {
  left: auto;
  right: 0px;
}

.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%;
}

.split:hover+.left_video,
.split:hover+.right_video {
  display: inline-block;
}

.split:hover {
  background-color: transparent;
}

＆＃13;

<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>
  <iframe class="left_video" src="https://www.youtube.com/embed/J5OSRpRyl6g?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  <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>
  <iframe class="right_video" src="https://www.youtube.com/embed/NuIAYHVeFYs?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

＆＃13;

播放视频的工作小提琴：fiddle

要自动播放 iframe视频 ，我在youtube网址的最后一位使用了?autoplay=1

例如：https://www.youtube.com/embed/J5OSRpRyl6g ?autoplay=1

希望这对你有所帮助。

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

3 个答案: