The HTML framework for a simple video player with an information bar showing details that is fully responsive.

Being responsive means the view from a large to mobile screen (small) stays rather consistent.

CodePen link.

Uses Bootstrap and Font Awesome icons.

The HTML:

<div class="container">
    <a href="https://i.imgur.com/C2RjKwM.jpg">
        <img src="https://i.imgur.com/C2RjKwM.jpg" class="card-img-top img-fluid" alt="video thumb"></a>
    <div class="info-bar">
        <div class="row title-row">
            <div class="col-12 col-md-9 title-col">
                <h1 class="title">The title for this video goes here</h1>
            </div>
            <div class="col-12 col-md-3 likes-col">
                <a href="like.php?id=123">
                    <p class="likes">8 <i class="fas fa-thumbs-up"></i></p>
                </a>
                <p class="views">23 <i class="fas fa-eye"></i></p>
            </div>
        </div>
        <div class="row info-row">
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-calendar-alt"></i> 14th October 2020</p>
            </div>
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-file-video"></i> MP4 H.264</p>
            </div>
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-ruler-combined"></i> 1920 x 1080p 30fps</p>
            </div>
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-clock"></i> 12m 44s</p>
            </div>
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-weight-hanging"></i> 512 MB</p>
            </div>
            <div class="col-4 col-lg-2">
                <p class="info-word"><i class="fas fa-tag"></i> Category</p>
            </div>
        </div>
    </div>
</div>

The CSS:

body {
  background-color: #d9e4dd;
}

.info-bar {
  padding: 0.3rem;
  margin: -0.1rem 0 0 0;
  background-color: #d5d0c8;
  border-radius: 0.25rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.info-word {
  font-size: 0.85rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  transition: 0.5s;
}

.info-word:hover {
  color: #306a86;
}

.views {
  font-size: 0.9rem;
  padding-left: 0.5rem;
  display: inline;
  margin: 0;
}

.likes {
  font-size: 0.9rem;
  color: #a0903f;
  margin: 0;
  display: inline;
}

.likes-col {
  padding-right: 3rem;
  text-align: right;
}

.title {
  padding-left: 1rem;
  font-size: 2rem;
}
.info-row {
  padding: 0 0.5rem;
  text-align: center;
}

.fa,
.fas {
  font-weight: 900;
  color: #55556c;
}

.fa-thumbs-up {
  color: #a0903f;
}

.fa-thumbs-up:hover {
  color: #877b3b;
}

a:hover {
  text-decoration: none;
}

@media screen and (min-width: 992px) {
  .col-lg-2 {
    padding: 10px 10px 5px 10px;
  }
}

@media screen and (max-device-width: 992px) {
  .info-row {
    text-align: left;
  }
}

@media screen and (max-device-width: 576px) {
  .info-word {
    font-size: 0.6rem;
  }
  .likes,
  .views {
    font-size: 0.75rem;
  }
  .title {
    padding-left: 0rem;
    font-size: 1.15rem;
  }
  .likes-col {
    padding-right: 2rem;
    text-align: right;
  }
  .info-row {
    padding: 0 0.2rem;
  }
}