Как сделать такой же блок ниже, но что бы при открытии было уже другое видео? Html/CSS

body {
    background: url(https://wallup.net/wp-content/uploads/2016/05/25/112856-simple_background-white-texture-white_background-web_design.jpg);
  }
  
  .button {
    display: inline-block;
    margin: 40px;
    width: 100px;
    height: 100px;
    background: url(https://wallup.net/wp-content/uploads/2016/05/25/112856-simple_background-white-texture-white_background-web_design.jpg);
    cursor: pointer;
    border-radius: 50%;
  
    box-shadow: 0 3px 20px rgba(0,0,0,.25),
    inset 0 2px 0 rgba(255,255,255,.6),
    0 2px 0 rgba(0,0,0,.1),
    inset 0 0 20px rgba(0,0,0,.1);
  }
  .button:hover {
    box-shadow: inset 0 0 20px rgba(0,0,0,.2),
    0 2px 0 rgba(255,255,255,.4),
    inset 0 2px 0 rgba(0,0,0,.1);
  }
  .btn-photo {
    background: url(https://weblinks.ru/wp-content/uploads/2021/12/6-1.png) center center no-repeat;
  }
  
  .btn-settings {
    background: url(https://weblinks.ru/wp-content/uploads/2021/12/6-1.png) center center no-repeat;
  }
  
  .btn-tag {
    background: url(https://weblinks.ru/wp-content/uploads/2021/12/6-1.png) center center no-repeat;
  }
  .parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -400px;
    left: 0;
    /* overflow: auto; */
}

.block {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -125px;
}
.modal {
  position: fixed; /* фиксированное положение */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5); /* фон */
  z-index: 1050;
  opacity: 0; /* по умолчанию модальное окно прозрачно */
  -webkit-transition: opacity 200ms ease-in; 
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in; /* анимация перехода */
  pointer-events: none; /* элемент невидим для событий мыши */
  margin: 0;
  padding: 0;
}
/* При отображении модального окно */
.modal:target {
  opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
  overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
    max-width: 680px;
    margin: 30px auto; /* отображение окна по центру */
}
}
/* Стили для блока с контентом окна */ 
.modal-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  outline: 0;
}
@media (min-width: 768px) {
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* Стили заголовка окна */
.modal-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eceeef;
}
.modal-title {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}
/* Стили кнопки "х" ("Закрыть")  */
.close {
  float: right;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  text-decoration: none;
}
/* Стили для закрывающей кнопки в фокусе или наведении */
.close:focus, .close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: .75;
}
/* Стили блока основного содержимого окна */
.modal-body {
  padding: 100px;
  overflow: auto;
  margin-top: -100px;
}
ul li { list-style-type: none; }

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>SEARCH</title>
  <link rel="stylesheet" href="CSS/index.css">
  <script src="jss.js"></script>
</head>
<body>
<div class="parent">
     <div class="block">
          <div id="openModal" class="modal">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title">Search</h3>
                  <a href="#close" title="Close" class="close">Х</a>
                </div>
                <div class="modal-body">    
                  <ul>
                      <video width="398" height="404" controls="controls" poster="kisspng-programmer-computer-programming-computer-software-allergy-5ab9ff7481ae57.1969746315221389965312.jpg">
                        <source src="movie/2022-07-15_12-36-46.mp4" type='video/ogg; codecs="theora, vorbis"'>
                        <source src="movie/2022-07-15_12-36-46.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                        <source src="movie/2022-07-15_12-36-46.mp4" type='video/webm; codecs="vp8, vorbis"'>
                        <a href="video/duel.mp4"></a>
                       </video>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <a href="#openModal"><div class="button"></div></a>
</div>
</div>
<body>
</html>