html – javascript music player covering entire width of website, how do i change width to make it much smaller

document.querySelector('.playpause').addEventListener('click', playpause);

function playpause() {
  if (document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>') {
    document.querySelector('#musicsrc').play();
    document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    document.querySelector('#musicsrc').pause();
    document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  }

}
#musicplayer {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center width: 90px;
  height: 24px;
  font-size: 11px;
  font-family: kosugi;
  color: #955136;
  line-height: 200%;
  background: white;
  border: 2px solid #F9CDE2;
  border-radius: 2px;
}

#musictitle {
  overflow: hidden;
  white-space: nowrap;
  -webkit-filter: drop-shadow(0px 0px 2px #FFB0C9);
  display: inline-block;
  width: calc(109% - 10px - 0px);
  margin-left: calc(4px + 0px);
}

#musicpixel {
  width: 120%;
  padding-top: 0px;
  position: relative;
  min-height: 20px;
  background: white;
  border-right: 2px solid #F9CDE2;
}

.overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  background: white;
}

#musicplayer:hover .overlay {
  opacity: 1;
  transition: 0.3s ease;
}

.playpause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.playpause:hover {
  cursor: help;
}

#musicpixel img {
  display: block;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 7s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  display: table;
  margin: auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590');
  display: table-cell;
  vertical-align: middle;
}

section {
  width: 50%;
  margin: 0 auto;
}

@font-face {
  src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
  font-family: jojoba;
}

div {
  font-family: jojoba;
  font-size: 18px;
}


/* Style the header */

header {
  background-color: #666;
  margin: auto;
  padding: 10px;
  text-align: center;
  border-color: #000000;
  font-size: 20px;
  height: 35px;
  width: 50%;
  margin: 0 auto;
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}


/* Create two columns/boxes that floats next to each other */

nav {
  float: left;
  width: 30%;
  height: 300px;
  /* only for demonstration, should be removed */
  background: #f1f1f1;
  padding: 20px;
}


/* Style the list inside the menu */

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #ffffff;
  height: 300px;
  /* only for demonstration, should be removed */
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;
}


/* Clear floats after the columns */

section::after {
  content: "";
  display: table;
  clear: both;
}


/* Style the footer */

footer {
  padding: 10px;
  text-align: center;
  color: white;
  height: 35px;
  width: 50%;
  margin: 0 auto;
  vertical-align: middle;
  background: rgb(219, 219, 219);
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {
  nav,
  article {
    width: 90%;
    height: auto;
  }
}
<html lang="en">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>

<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id='musicplayer'>
    <div id='musicpixel'>
      <img src="https://graphic.neocities.org/tumblr_inline_oeqayhhdhP1uqb749_500.gif">
      <div class="overlay">
        <div class="playpause"><i class="fas fa-play"></i></div>
      </div>
    </div>
    <div id='musictitle'>
      <span class="marquee">きみに恋したんだ</span>
    </div>
  </div>

  <audio id='musicsrc' loop src="https://dl.dropbox.com/s/58ifb5zr8lbedlo/%E3%81%8D%E3%81%BF%E3%81%AB%E6%81%8B%E3%81%97%E3%81%9F%E3%82%93%E3%81%A0.mp3"></audio>
  <div>

    <header>

    </header>

    <section>
      <nav>
        <img src="https://barbara.crd.co/assets/images/gallery34/d0d75dc1.gif?v=078d66a6">
        <ul>
          <li><a href="#">London</a></li>
          <li><a href="#">Paris</a></li>
          <li><a href="#">Tokyo</a></li>
        </ul>
      </nav>

      <article>
        <h2> yatori <img src="https://barbara.crd.co/assets/images/gallery07/fd56c474.gif?v=078d66a6"> </h2>

        lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </article>
    </section>

    <footer>

    </footer>
  </div>
</body>

</html>

Leave a Comment