列表是否应该用于网格中的视频？

我想知道的是，列表应该用于网格内的视频，还是没有必要？

我提供了两组代码，一组使用列表，另一组不使用列表 .

Code: List is being used here

https://jsfiddle.net/g6oaht8f/46/

.wrap {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
}

.wrap .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.wrap .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.wrap .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.wrap .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.wrap .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

.wrap .nav li svg:hover path {
  fill: #0059dd;
}

.wrap .linesa::before,
.wrap .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 600px;
  background: blue;
}

.wrap .linesa::after {
  left: 399px;
}

.wrap .linesb::before,
.wrap .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: blue;
}

.wrap .linesb::after {
  top: 399px;
}

.wrap svg:hover path {
  fill: #0059dd;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.wrap .playa,
.playinga {
  margin: 0;
}

.wrap .playb,
.playingb {
  margin: 0 201px 0;
}

.wrap .playc,
.playingc {
  margin: 0 402px 0;
}

.wrap .playd,
.playingd {
  margin: 201px 0 0;
}

.wrap .playe,
.playinge {
  margin: 201px 201px 0;
}

.wrap .playf,
.playingf {
  margin: 201px 402px 0;
}

.wrap .playg,
.playingg {
  margin: 402px 0 0;
}

.wrap .playh,
.playingh {
  margin: 402px 201px 0;
}

.wrap .playi,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}

Code: List is not being used here

https://jsfiddle.net/g6oaht8f/48/

.wrap {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
  background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
}

.wrap .linesa::before,
.wrap .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 600px;
  background: blue;
}

.wrap .linesa::after {
  left: 399px;
}

.wrap .linesb::before,
.wrap .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: blue;
}

.wrap .linesb::after {
  top: 399px;
}

.wrap svg {
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

.wrap svg:hover path {
  fill: #0059dd;
}

.wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

iframe {
  position: absolute;
  top: 0;
  left: 0px;
  cursor: pointer;
}

.wrap .playa,
.playinga {
  margin: 0;
}

.wrap .playb,
.playingb {
  margin: 0 201px 0;
}

.wrap .playc,
.playingc {
  margin: 0 402px 0;
}

.wrap .playd,
.playingd {
  margin: 201px 0 0;
}

.wrap .playe,
.playinge {
  margin: 201px 201px 0;
}

.wrap .playf,
.playingf {
  margin: 201px 402px 0;
}

.wrap .playg,
.playingg {
  margin: 402px 0 0;
}

.wrap .playh,
.playingh {
  margin: 402px 201px 0;
}

.wrap .playi,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}