Изменить цвет фона на видео при наведении курсора мыши

Я сделал вам небольшой пример: надеюсь, это поможет: https://jsfiddle.net/pkbxupxc/4/

(Как-то видео не воспроизводится в stackoverflow (но работает на jsfiddle).

По сути, все, что я сделал, это поместил iframe внутри div, дав ему 100% ширину и высоту, а затем установил display: block при наведении и 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>

Я тоже хотел попробовать это на себе, поэтому создал именно то, что вам нужно, с помощью 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>

Это сработает для вас:

Приведенный ниже фрагмент видео не воспроизводится в Переполнение стека, но хорошо работает на скрипке и других страницах:

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

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

A working Fiddle with playing video : fiddle

Для автовоспроизведения iframe видео я использовал: ?autoplay=1 в последнем URL-адресе YouTube.

например: https://www.youtube.com/embed/J5OSRpRyl6g?autoplay=1

Надеюсь, это было полезно для вас.