<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta http-equiv="X-UA-Compatible" content="IE=Edge">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>HTML</title>

      <!-- HTML -->

      <!-- Custom Styles -->

      <link rel="stylesheet" href="style.css">

</head>

<body>

      <video class="VIDME" poster="https://bit.ly/3my5iUB" controls id="PLAY" src="https://is.gd/jvTteY" autoplay></video>

      <!-- PLAYLIST VIDEO -->

      <div class="PLAYLIST-VIDEO-H-SCROLL">

            <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://is.gd/jvTteY'">

                  <img src="https://is.gd/ygksX8"><br>

                  <span class="T-1"> DMASIV </span>

                  <span class="T-2"> DENGARLAH SAYANG </span></a>

            <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://is.gd/M1cb0Y'">

                  <img src="https://is.gd/8DVDDW"><br>

                  <span class="T-1"> ARIEL NOAH </span>

                  <span class="T-2"> MOSHIMO MATA ITSUKA </span></a>

            <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://is.gd/E4QyL2'">

                  <img src="https://is.gd/9uXQLi"><br>

                  <span class="T-1"> DMASIV </span>

                  <span class="T-2"> CINTA INI MEMBUNUH KU </span></a>

            <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://is.gd/e5KEfn'">

                  <img src="https://is.gd/7lBTPL"><br>

                  <span class="T-1"> DRIVE </span>

                  <span class="T-2"> BERSAMA BINTANG </span>

                  <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://bit.ly/3sxAmaT'">

                        <img src="https://is.gd/LTRYv3"><br>

                        <span class="T-1"> LESTY FEAT PASHA UNGU </span>

                        <span class="T-2"> BISMILLAH CINTA </span></a>

                  <a href="javascript:void();" onclick="document.getElementById('PLAY').src='https://is.gd/fMJ6aK'">

                        <img src="https://is.gd/qpUY7a"><br>

                        <span class="T-1"> PASHA UNGU </span>

                        <span class="T-2"> BILA TIBA </span></a>

      </div><!-- PENUTUP VIDEO SCROLL -->

</body>

</html>
/* AUTHOR BY ZEK */

body {
      padding: 4px;

      margin-top: 20px;
}

.VIDME {
      border: 5px solid deeppink;

      width: 98%;

      border-top: 5px solid deepskyblue;

      border-bottom: 5px solid deepskyblue;

      border-radius: 15px;
}

.PLAYLIST-VIDEO-H-SCROLL {
      background-image: linear-gradient(darkblue, darkgreen);

      overflow: auto;

      padding: 8px;

      text-align: center;

      white-space: nowrap;

      margin-top: 5px;

      border: 5px solid deepskyblue;

      border-top: 5px solid deeppink;

      border-bottom: 5px solid deeppink;

      border-radius: 15px;

      width: 94%;
}

.PLAYLIST-VIDEO-H-SCROLL a {
      display: inline-block;

      border-radius: 15px;

      border-top: 5px solid wheat;

      border-bottom: 5px solid wheat;

      color: white;

      background-image: linear-gradient(darkcyan, darkred);

      text-align: left;

      padding: 4px;

      text-decoration: none;
}

.PLAYLIST-VIDEO-H-SCROLL a:hover {
      background-image: linear-gradient(darkred, darkcyan);

      text-align: left;

      color: deepskyblue;
}

.PLAYLIST-VIDEO-H-SCROLL img {
      border-radius: 15px;

      margin-bottom: 10px;

      border-bottom: 5px solid wheat;

      width: 300px;

      height: 170px;
}

.T-1,
.T-2 {
      padding: 4px;

      font-size: 12px;

      text-align: center;

      border-bottom: 5px solid wheat;
}

.T-1 {
      border-radius: 8px;

      background: black;

      margin-left: 5px;

      float: left;
}

.T-2 {
      border-radius: 8px;

      background: black;

      margin-right: 5px;

      margin-bottom: 5px;

      float: right;
}

.T-1:hover,
.T-2:hover {
      background: #040908db;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.